bower install artTemplate --save

https://github.com/aui/artTemplate

快速上手

模板定义：

<div id="content"></div>

<script id="test" type="text/html">
    {{if isAdmin}}
        <h1>{{title}}</h1>
        <ul>
            {{each list as value i}}
                <li>索引 {{i + 1}} ：{{value}}</li>
            {{/each}}
        </ul>
    {{/if}}
</script>

function(item,index)

数据绑定

<script src="../dist/template.js"></script>

<script>var data = {title: '基本例子',isAdmin: true,list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']};var html = template('test', data);document.getElementById('content').innerHTML = html;</script>

语法说明

1. 版本

有两个版本的模板语法可以选择

简洁语法

推荐使用，语法简单实用，利于读写，使用template.js。

{{if admin}}{{include 'admin_content'}}{{each list}}<div>{{$index}}. {{$value.user}}</div>{{/each}}
{{/if}}

原生语法

使用template-navative.js

<%if (admin){%><%include('admin_content')%><%for (var i=0;i<list.length;i++) {%><div><%=i%>. <%=list[i].user%></div><%}%>
<%}%>

2. 显示属性

<h3> <span class=”{{title}}”></span></h3>

#代表属性不转义，会按照原始串输出，如果是标签会被解析成dom

<h3>{{#title}}</h3>

3. 判断

{{if isAdmin}}<h1>{{title}}</h1>
{{/if}}

{{if isAdmin}}<h1>{{title}}</h1>
{{else}}<div>{{message}}</div>
{{/if}}

{{if type==1}}<h1>{{title}}</h1>
{{/if}}

4. 循环

{{each list as value i}}<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}

{{each list}}<li>索引 {{$index}} ：{{$value}}</li>

{{include ‘test’ }}
{{/each}}

{{each data}}<tr><td >{{$value.agent_name}}</td><td >{{$value.agent_id}}</td><td >{{$value.type}}</td><td >{{each $value.items}}<span>{{$value}}</span>{{/each}}<td><tr>
{{/each}}

5. 引入

引入id为list的模板

{{include 'list'}}

模板定义

6. 使用type=“text/html”的script标签

<script id="list" type="text/html">
<ul>{{each list as value i}}<li>索引 {{i + 1}} ：{{value}}</li>{{/each}}
</ul>
</script>

7. 使用js的变量存储模板

var source = '<ul>'+    '{{each list as value i}}'+        '<li>索引 {{i + 1}} ：{{value}}</li>'+    '{{/each}}'+ '</ul>';

var source = '\        <ul>\          {{each list as value i}}\            <li>索引 {{i + 1}} ：{{value}}</li>\          {{/each}}\        </ul>\        ';

方法

注意：各个方法传递的数据必须是具有属性的对象,不能是数组

{data:{}} 或者{data:[]}

8. template(id, data)

根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。

如果没有 data 参数，那么将返回一渲染函数。

<ul id="list"></ul>
<script id="list-temp" type="text/html">{{each list}}<li><img src="{{$value.img}}" alt=""><h3>{{$value.title}}</h3><p>{{$value.time}}</p></li>{{/each}}</script>

<script>var data={list:[{img:'1.jpg',title:'javascript',time:'2014-11-01'},{img:'2.jpg',title:'css3',time:'2015-11-01'},{img:'3.jpg',title:'html5',time:'2016-11-01'}]}document.querySelector('#list').innerHTML=template('list-temp',data);</script>

9. template.compile(source)

template.compile()接收模板字符串，会返回一个函数，使用该函数传入数据构建html

<ul id="list"></ul>
<script>var source='\             {{each list}}\            <li>\            <img src="{{$value.img}}" alt="">\            <h3>{{$value.title}}</h3>\            <p>{{$value.time}}</p>\            </li>\            {{/each}}\            ';var data={list:[{img:'1.jpg',title:'javascript',time:'2014-11-01'},{img:'2.jpg',title:'css3',time:'2015-11-01'},{img:'3.jpg',title:'html5',time:'2016-11-01'}]}var render = template.compile(source);//返回一个函数var html = render(data);

//var html= template.compile(source)(data);document.querySelector('#list').innerHTML=html;</script>

10.     template.helper(name, callback)

添加辅助方法。

<ul id="list"></ul>
<script id="list-temp" type="text/html">{{each list}}<li><p>{{$value.state | state}}</p><h3>{{$value.title}}</h3><p>{{$value.remark | subStr:15}}</p></li>{{/each}}
</script>

<script>template.helper('state',function (value) {if(value==0){return '禁用'}else{return '启用'}})template.helper('subStr',function (value,num) {return value.substr(0,num)+'...';})
</script>

<script>var data={list:[{state:'1',title:'javascript',remark:'artTemplate 是新一代 javascript 模板引擎，它在 v8 中的渲染效率可接近 javascript 性能极限'},{state:'1',title:'css3',remark:'在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍（性能测试）'},{state:'0',title:'html5',remark:'另外，artTemplate 的模板还支持使用自动化工具预编译，这一切都在 2KB(Gzip) 中实现'}]}document.querySelector('#list').innerHTML=template('list-temp',data);</script>

handerbar

http://handlebarsjs.com/

https://github.com/wycats/handlebars.js/

这种方式的的缺点是，模板通过字符串拼接，不好维护，适合简单模板。