artTemplate使用

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/

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