js模板引擎-art-template常用总结
Posted jeely
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js模板引擎-art-template常用总结相关的知识，希望对你有一定的参考价值。
art-template
javascript 模板引擎，官网：https://github.com/aui/art-template
分为原生语法和简洁语法，本文主要是讲简洁语法
- 基础数据渲染
- 输出html
- 流程控制
- 遍历
- 调用自定义函数方法
- 子模板引入
基础数据渲染
一、引入art-template.js文件
<script src="template-debug.js"></script>二、编写HTML模板
<script id="test" type="text/html">
<h1>title</h1>
</script>三、向模板插入数据，并输出到页面
var data =
title:"hello world"
;
var html = template("test",data);
document.getElementById(‘content‘).innerHTML = html;输出HTML
<script id="test" type="text/html">
<h1>title</h1>
</script>//注意：title这是对内容编码输出，应该写成#title这是对内容不编码输出
<script id="test" type="text/html">
<h1>#title</h1>
</script>
var data =
title:"<p>hello world</p>"
;
var html = template("test",data);
document.getElementById(‘content‘).innerHTML = html;流程控制语句（if else）
if value
...
else if value
...
else
...
/if
art-template里面的流程控制就相对其他模板来说强大很多了，直接看例子吧
<script id="test" type="text/html">
<div>
if bok==22
<h1>线上</h1>
else if bok==33
<h2>隐藏</h2>
else
<h3>走这里</h3>
/if
</div>
</script>
<script>
var data =
"bok":22
;
var html = template(‘test‘,data);
document.getElementById("app").innerHTML = html;
</script>嵌套的写法
<script id="test" type="text/html">
<div>
if bok
if list.length>=0
each list
<p>$index:$value</p>
/each
else
<p>没有数据</p>
/if
/if
</div>
</script>
<script>
var data =
"bok":true,
list:["a","b","c"]
;
var html = template(‘test‘,data);
document.getElementById("app").innerHTML = html;
</script>循环遍历语句
each name
索引：$index
值：$value
/each
<script id="test" type="text/html">
<div>
<ul>
if c==100
<ul>
each person
<li>
编号：$index+1--姓名：$value.name--年龄：$value.age
</li>
/each
</ul>
/if
</ul>
</div>
</script>
<script>
var data =
c:100,
person:[
name:"jack",age:18,
name:"tom",age:19,
name:"jerry",age:20,
name:"kid",age:21,
name:"jade",age:22
]
;
var html = template("test",data);
document.getElementById("content").innerHTML = html;
</script>调用自定义方法
通过template.helper(name,fnCallBack)注册方法
可以直接在中调用
<script id="test" type="text/html">
<div>
if c==100
<ul>
each person
<li>姓名：$value.name--性别：show($value.sex)</li>
/each
</ul>
/if
</div>
</script>
<script>
var data =
c:100,
person:[
name:"jack",age:18,sex:1,
name:"tom",age:19,sex:0,
name:"jerry",age:20,sex:0,
name:"kid",age:21,sex:1,
name:"jade",age:22,sex:0
]
;
//自定义函数
template.helper("show",function(sex)
console.log(sex);//同样可以打印日志到控制台
if(sex==0)
return "男"
else if(sex==1)
return "女"
);
var html = template("test",data);
document.getElementById("app").innerHTML = html;
</script>调用子模板
include ‘main‘ 引入子模板，数据默认为共享
include ‘main‘ a a为制定数据，但是同样必须是父级数据，可以看看下面的例子，如果不注入的a的话，引入的子模板是接受不到数据的
<body>
<div id="app"></div>
<script src="template-debug.js"></script>
<script id="main" type="text/html">
<ul>
each list
<li>$value</li>
/each
</ul>
</script>
<script id="test" type="text/html">
<div>
<ul>
each person
<li>$value.name</li>
/each
</ul>
include ‘main‘ a
</div>
</script>
<script>
var data =
person:[
name:"jack",age:18,
name:"tom",age:19,
name:"jerry",age:20,
name:"kid",age:21,
name:"jade",age:22
],
a:
list:[‘文艺‘, ‘博客‘, ‘摄影‘, ‘电影‘, ‘民谣‘, ‘旅行‘, ‘吉他‘]
;
var html = template("test",data);
document.getElementById("app").innerHTML=html;
</script>
</body>以上是关于js模板引擎-art-template常用总结的主要内容，如果未能解决你的问题，请参考以下文章