art-template
javascript 模板引擎
分为原生语法和简洁语法，本文主要是讲简洁语法
- 基础数据渲染
- 输出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常用
原文地址：http://www.cnblogs.com/miaosen/p/7886696.html