arttemplate入门

arttemplate是JavaScript模板引擎，使用时需引入其对应的js文件：

• arttemplate.js 简洁语法版
• arttemplate-native.js 原生语法版

arttemplate有两种语法格式（简洁语法和原生语法），本文记录简介语法的使用。

简单应用

准备工作：下载template.js
使用流程：type=”text/html”的script标签存放模板，js中准备数据并渲染

<!-- 引入简洁语法版js文件-->
<script type="text/javascript" src="arttemplate.js"></script>

<div id="content"></div>
<!-- 编写模板,此模板放在html页面中,模板也可放在js文件中 -->
<script id="contentTemplate" type="text/html">
    <h1>{{title}}</h1> <ul> {{each list}}
            <li>索引 {{$<span class="hljs-variable">index</span> + 1}}</span><span class="xml"><span class="javascript"> ：</span></span><span class="hljs-expression">{{$value}}</li> {{/each}}
    </ul> </script>
<!-- 渲染模板 -->
<script type="text/javascript">
    var data = {// 准备模板中涉及的数据
        title: '标签',
        list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
    };
    var html = template('contentTemplate', data);// 调用template()方法将模板与数据结合进行渲染
    document.getElementById('content').innerHTML = html;// 将渲染结果写入div
</script>
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

js文件提供的方法

template(id,data)

• 返回渲染结果
• 内部根据document.getElementById(id)查找模板
• 如果没有data参数，返回一个渲染函数

【注】

由于arttemplate的预编译功能，可突破浏览器限制，让前端模板拥有后端模板一样的同步“文件”加载能力：
一、按文件与目录组织模板

template('tpl/home/main', data);
   
   
1

二、模板支持引入子模板

{{include '../public/header'}}
   
   
1

template.compile(source,options)

返回一个渲染函数，主要用于模板写在js中

<div id="content"></div>
<!-- 在javascript中存放模板并渲染 -->
<script type="text/javascript">
    var source = '<ul>' 
                    + '{{each list as value i}}' 
                        +  '<li>索引 {{i + 1}} ：{{value}}</li>'
                    + '{{/each}}'
                + '</ul>';

    var render = template.compile(source); // 返回一个渲染函数
    var data = {
        list : ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
    }
    var html = render(data);
    document.getElementById('content').innerHTML = html;
</script>
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

template.render(source,options)

返回渲染结果

template.helper(name,callback)

添加辅助方法，即在模板中访问外部公用函数

<div id="content"></div>
<script id="testTemplate" type="text/html">
    {{time | dateFormat:'yyyy年 MM月 dd日 hh:mm:ss'}}
</script>

<script type="text/javascript">
    /** * 对日期进行格式化， * @param date 要格式化的日期 * @param format 进行格式化的模式字符串 * @return String */
    template.helper('dateFormat', function (date, format) {
        date = new Date(date);
        var map = {
            "M": date.getMonth() + 1, //月份 
            "d": date.getDate(), //日 
            "h": date.getHours(), //小时 
            "m": date.getMinutes(), //分 
            "s": date.getSeconds(), //秒 
            "q": Math.floor((date.getMonth() + 3) / 3), //季度 
            "S": date.getMilliseconds() //毫秒 
       };
       format = format.replace(/([yMdhmsqS])+/g, function(all, t){
           var v = map[t];
           if(v !== undefined){
               if(all.length > 1){
                   v = '0' + v;
                   v = v.substr(v.length-2);
                }
               return v;
           }else if(t === 'y'){
               return (date.getFullYear() + '').substr(4 - all.length);
           }
           return all;
        });
        return format;
    });

    var data = {
        time: (new Date).toString(),
    };
    var html = template('testTemplate', data);
    document.getElementById('content').innerHTML = html;
</script>
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

template.config(name,value)

更改引擎的默认配置

模板编写语法

输出表达式

{{content}} <!--内容编码输出，编码可以防止数据中含有 HTML 字符串--><span style="color:#F00">hello world!</span>
{{#content}} <!--内容不编码输出--> hello word!
   
   
1
2

var data = {
    content: '<span style="color:#F00">hello world!</span>'
};
   
   
1
2
3

条件表达式

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

   
   
1
2
3
4
5
6
7
8

var data = {
    admin:true
}
   
   
1
2
3

遍历表达式

无论数组或者对象都可以用 each 进行遍历

{{each list as value index}}
    <li>{{index}} - {{value.user}}</li>
{{/each}}
<!--或-->
{{each list}}
    <li>{{$<span class="hljs-variable">index</span>}}</span><span class="xml"> - </span><span class="hljs-expression">{{$value.user}}</li>
{{/each}}
   
   
1
2
3
4
5
6
7

嵌入子模板

{{include 'template_name'}} <!--子模板共享当前数据-->
{{include 'template_name' news_list}} <!--子模板指定新数据-->
   
   
1
2

                                            <link rel="stylesheet" href="http://csdnimg.cn/release/phoenix/production/markdown_views-0bc64ada25.css">
                                </div>