artTemplate 總結

編寫模板

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

渲染模板

var data = {    
title: '標籤',    
list: ['文藝', '部落格', '攝影', '電影', '民謠', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;

簡介語法

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

方法

template(id,data)

• 根據id渲染模板，內部會根據document.getElementById(id)查詢模板。
• 如果沒有data引數，將會返回一渲染函式。

template.compile(source,options)

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

var render = template.compile(source);
var html = render({
    list: ['攝影', '電影', '民謠', '旅行', '吉他']
});

document.getElementById('content').innerHTML = html;

template.render(source,options) 將返回渲染結果

template.helper(name,callback) 新增輔助方法。

<script>
/** 
 * 對日期進行格式化， 
 * @param date 要格式化的日期 
 * @param format 進行格式化的模式字串
 *     支援的模式字母有： 
 *     y:年, 
 *     M:年中的月份(1-12), 
 *     d:月份中的天(1-31), 
 *     h:小時(0-23), 
 *     m:分(0-59), 
 *     s:秒(0-59), 
 *     S:毫秒(0-999),
 *     q:季度(1-4)
 * @return String
 * @author yanis.wang
 * @see http://yaniswang.com/frontend/2013/02/16/dateformat-performance/
 */
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('test', data);
document.getElementById('content').innerHTML = html;
</script>

template.config(name.value)更改引擎的預設設定

詳情請看 http://www.jq22.com/jquery-info1097

使用預編譯 待續