JS artTemplate模板引擎 - 会coding的HAM

artTemplate下载：https://github.com/aui/art-template

artTemplate文档：https://aui.github.io/art-template/docs/

HTML模板引擎

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML模板引擎</title>
<style>
li span{
color: red;
}
</style>
</head>
<body>
<script src='template.js'></script>
<script>
// 辅助方法
template.helper('formData',function(time){
var y = time.getFullYear(),
m = time.getMonth(),
d = time.getDate()
m = m < 10 ?'0'+m:m
d = d < 10?'0'+d:d
return `${y} - ${m} - ${d}`
})
template.helper('money',function(price){
if(price == 0) return'免费'
return '￥' + price.toFixed(2)
})
</script>
<!--创建一个简单的模板
创建模板需要使用script 并且type需要设置为text/html
创建模板时模板的script必须设置id 才能使用模板
-->
<script id="template" type="text/html">
{{if books.length < 1}}
<p>抱歉没有找到推荐书目</p>
{{else}}
<h1>{{title}}{{books.length}}本</h1>
<ul>
{{each books as b i}}
<li>
{{b.name}}
<del>{{b.markerPrice}}</del>
<span>{{b.price | money}}</span><br>
出版日期:{{b.pData | formData}}
</li>
{{/each}}
</ul>
{{/if}}
</script>
<script>
var data = {
title:'推荐书目',
books:[{
name:'JavaScript 权威指南',
markerPrice:111,
price:99.9,
pData:new Date(2017,8,21)
},{
name:'三国演义',
markerPrice:120,
price:98.9,
pData:new Date(2017,5,21)
},{
name:'大闹天空',
markerPrice:0,
price:100,
pData:new Date(2017,8,1)
}]
}
// 在使用模板时需要用到一个函数template
// 第一个参数需要使用模板的id
// 第二个参数套用模板的数据
// 返回值数据 + 模板生成的html字符串
var template = template('template',data)
document.body.innerHTML = template
console.log(template)
</script>
</body>
</html>

模板包含

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板包含</title>
</head>
<body>
<script src="template.js"></script>
<script id="web" type="text/html">
<div>
<a href="{{url}}">{{name}}</a>
</div>
</script>
<script type="text/html" id="book">
<div>
<img width="300px" height="400px" src="{{img}}" alt="书籍封面">
<a href="{{url}}">{{name}}</a>
</div>
</script>
<script id="template" type="text/html">
<h1>{{title}}</h1>
{{each items as item}}
<!--一个模板中可以套用另一个模板 include
如果这个模板是一个固定模板只写模板id即可 {{include '模板id'}}
如果这个模板是个需要数据的模板那么就要传递数据对象{{include '模板id' item}}-->
{{if item.type == 'web'}}
{{include 'web' item}}
{{else}}
{{include 'book' item}}
{{/if}}
{{/each}}
</script>
<script>
var data = {
title:'建议浏览的网站和阅读书目',
items:[{
type:'web',
name:'MDN',
url:'https://developer.mozilla.org/zh-CN/'
},{
type:'book',
name:'从你的全世界路过',
url:'https://baike.baidu.com/item/%E4%BB%8E%E4%BD%A0%E7%9A%84%E5%85%A8%E4%B8%96%E7%95%8C%E8%B7%AF%E8%BF%87/16325805?fr=aladdin',
img:'https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike220%2C5%2C5%2C220%2C73/sign=292d33ad52afa40f28cbc68fca0d682a/2f738bd4b31c8701fb5636792f7f9e2f0608ff49.jpg'
},{
type:'web',
name:'gitHub',
url:'https://github.com/'
}]
}
document.body.innerHTML = template('template',data)
</script>
</body>
</html>

发送评论编辑评论

HTML模板引擎

模板包含

发送评论 编辑评论

推荐文章

发送评论编辑评论