arttemplate入门

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

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

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

简单应用

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

<script type="text/javascript" src="arttemplate.js">script>

<div id="content">div>

<script id="contentTemplate" type="text/html">
    
{{title}}</h1>
    

        {{each list}}
            
索引 {{$index + 1}} ：{{$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>

js文件提供的方法

template(id,data)

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

【注】

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

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

二、模板支持引入子模板

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

template.compile(source,options)

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

"content">div>

<script type="text/javascript">
    var source = '
' 
                    + '{{each list as value i}}' 
                        +  '
索引 {{i + 1}} ：{{value}}
'
                    + '{{/each}}'
                + '
';

    var render = template.compile(source); // 返回一个渲染函数
    var data = {
        list : ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
    }
    var html = render(data);
    document.getElementById('content').innerHTML = html;
script>

template.render(source,options)

返回渲染结果

template.helper(name,callback)

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

"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>

template.config(name,value)

更改引擎的默认配置

模板编写语法

输出表达式

{{content}} <span style="color:#F00">hello world!span>
{{#content}}  hello word!

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

条件表达式

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

var data = {
    admin:true
}

遍历表达式

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

{{each list as value index}}
    <li>{{index}} - {{value.user}}li>
{{/each}}

{{each list}}
    <li>{{$index}} - {{$value.user}}li>
{{/each}}

嵌入子模板

{{include 'template_name'}} 
{{include 'template_name' news_list}}