月度归档： 2016年11月

整   理：晋 哲

时   间：2016-11-15

说   明：使用模板引擎代替原本数组的push()方法和字符串拼接方式

一、使用方式
1、基础引用

<div id="content"></div>
<script src="template.js"></script>

2、模板搭建
使用一个type="text/html"的script标签存放模板；

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

3、数据渲染

<script>
var data = {
    title: '一、基础用法',
    list: ['列表1', '列表2', '列表3', '列表4', '列表5']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>

二、语法
{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。

1、输出表达式
对内容编码输出，如：{{ value }}

2、条件表达式

{{if admin}}
    <p>admin</p>
{{else if code > 0}}
    <p>master</p>
{{else}}
    <p>error!</p>
{{/if}}

3、遍历表达式

{{each list as value index}}
    <li>序列{{index}} ：{{value.text}}</li>
{{/each}}

4、嵌入子模板

{{include 'template_name'}}

三、文档参考
https://github.com/aui/artTemplate