template 的使用

 

插件介紹：template 是一個高性能的JavaScript模板引擎。

 

插件特性：

　　一、性能卓越，執行速度快（mustache 與 tmpl 的20多倍）；

　　二、支持運行時調試，可精準定位異常模板所在語句；

　　三、對 NodeJS Express 有很好的支持；

　　四、安全，默認對輸出進行轉義；

　　五、可在瀏覽器端實現按路徑加載模板；

　　六、支持預編譯，可將模板轉換成爲很是精簡的 js 文件；

　　七、模板語句簡介，無需前綴引用數據，擁有簡潔版本和原生版本可供選擇；

　　八、支持全部流行的瀏覽器；

 

開始使用（有兩種語法， 此文章介紹的是簡介語法）

　　1） artTemplate 模板必須使用一個type="text/html" 的 script 標籤用來存放模板（標籤中寫的是HTML）；

　<script type="text/html"></script>

 

　　2） 開始編寫本身的模板

 <script id="model" type="text/html">
     <h1>{{title}}</h1>
     <ul>
         {{each list as value index}}
             <li>{{index+1}}、{{value}}</li>
         {{/each}}
     </ul>
 </script>

 

　　3） 使用數據渲染模板

 var data ={
     title: '熱愛的遊戲',
     list: ['LOL','王者農藥','夢三國','魔獸爭霸','其它']
 };

 var html = template('model',data);
 document.getElementById('box').innerHTML = html

 

到了這一步，打開頁面就能夠看到效果了。

 

artTemplate 簡潔語法介紹：

1） 使用以前須要引用簡潔語法的版本，例如：

 <script src="template.js"></script>

2） 表達式：

　　{{ 和 }} 符號包裹起來的語句則爲模板的表達式。

3） 輸出表達式：

　　對內容編碼輸出： {{ title }}

　　對內容不編碼輸出： {{ #title }}

　　區別：

 // 假若有這樣一段數據，title 內出現了標籤 
 var data ={
      title: '<i>熱愛的</i>遊戲',
      list: ['LOL','王者農藥','夢三國','魔獸爭霸','其它']
 };

 {{ title }}  // 顯示內容爲：<i>熱愛的</i>遊戲

 {{ #title }} // 顯示內容爲：熱愛的遊戲

 

4） 條件表達式

<script id="model" type="text/html">
    <h1>{{ title }}</h1>
    <ul>
　　　　　// 判斷條件自定
        {{if list.length>0}}
            {{each list as value index}}
                <li>{{index+1}}、{{value}}</li>
            {{/each}}
        {{else}}
            <p>沒有內容</p>
        {{/if}}
    </ul>
</script>

 

5） 遍歷表達式

{{each list as value index}}
    <li>{{index+1}}、{{value}}</li>
{{/each}}

// 也能夠被簡寫爲

{{each list}}
    <li>{{$index+1}}、{{$value}}</li>
{{/each}}

 

artTemplate 方法：

　　template 函數中有兩個參數值。

　　第一個參數表示須要編譯的模板（填寫的是模板的 ID）

　　第二個參數是須要向模板填充的數據，返回值是編譯以後的HTML字符串；

　　// 目前瞭解到此處

 

artTemplate 默認配置

 

示例：

<script id="people" type="text/html">
    <h1>{{title}}</h1>
    <ul>
        {{if peos.length>0}}
            {{each peos as p index}}
                <li>
                    {{index+1}}、
                    選手姓名：<span>{{p.name}</span>&#x3000;
                    年齡：<span>{{p.age}}</span>
                </li>
            {{/each}}
        {{else}}
            <p>沒有內容</p>
        {{/if}}
    </ul>
</script>

<script>
    var data2 ={
        title: '喜歡的職業選手',
        peos: [
            {
                name: "<b>Uzi</b>",
                age: 20
            },
            {
                name: 'Clearlove7',
                age: 20
            },
            {
                name: 'Korol',
                age: 21
            }
        ]
    }
    // 默認爲true 不編譯 輸出爲 <b>Uzi</b>
　　//  false 編譯 是否編碼輸出 HTML 字符
    template.config("escape",false); 
    var html2 = template('people',data2);
    document.getElementById('box2').innerHTML = html2;
</script>