template.js小小說明

教程

template.js 一款 JavaScript 模板引擎，簡單，好用。提供一套模板語法，用戶能夠寫一個模板區塊，每次根據傳入的數據，生成對應數據產生的HTML片斷，渲染不一樣的效果。

簡介

主要的用途就是，在寫好的模板上，放進數據，生成含有數據的html代碼。一個超快的前端模板引擎。使用一個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>

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

        <%if (admin){%>
            <%include('admin_content')%>
            <%for (var i=0;i<list.length;i++) {%>
                <div><%=i%>. <%=list[i].user%></div>
            <%}%>
        <%}%>

方法

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)
添加輔助方法。

template.config(name, value)
更改引擎的默認配置。

字段          類型              默認值           說明
       openTag          String 	    '{{' 	    邏輯語法開始標籤
       closeTag         String 	    "}}" 	    邏輯語法結束標籤
       escape           Boolean      true 	    是否編碼輸出 HTML 字符
       cache            Boolean      true 	    是否開啓緩存（依賴 options 的 filename 字段）
       compress       Boolean 	  false     是否壓縮 HTML 多餘空白字符

使用預編譯

include可嵌套子模板。

//將id爲list的模板包含進來         
              {{include 'list'}}

轉義

//只須要加上「＃」號，模板默認就不轉義啦。
           <div id="content"></div>
            <script id="test" type="text/html">
            	<p>不轉義：{{#value}}</p>
            	<p>默認轉義： {{value}}</p>
            </script>

           var data = {
             value: '<span style="color:#F00">hello world!</span>'
              };
            var html = template('test', data);
            document.getElementById('content').innerHTML = html;

在頁面上打印你的數據。

<script id="test" type="text/html">
            {{print a b c}}
            </script>


            var html = '';
            var data = {
            	a: 'hello',
            	b: '--world',
            	c: '--!!!'
            };
            html = template('test', data);
            document.write(html);

另外一個更快的 doT.js模板引擎

模板是 ：text/x-dot-template類型腳本

使用方法：

插值 {{=}}

<div id="interpolation"</div>


        <script id="interpolationtmpl" type="text/x-dot-template">
           <div>Hi {{=it.name}}! </div>
           <div>{{=it.age || ''}}</div>
        </script>


        <script type="text/javascript">                          
           var dataInter = { "name": "Jake", "age": 31 };
           var interText = doT.template($("#interpolationtmpl").text());
           $("#interpolation").html(interText(dataInter));
        </script>

for evaluation for in 循環 {{}} 賦值

<div id="evaluation"></div>

           <script id="evaluationtmpl" type="text/x-dot-template">
              {{ for(var prop in it) { }}
                 <div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div>
              {{ } }}
           </script>

for array iteration 數組 {{~ }}數組遍歷

<div id="arrays"></div>


        <script id="arraystmpl" type="text/x-dot-template">                        
          {{~it.array:value:index}}
             <div>{{= index+1 }}{{= value }}!</div>
          {{~}}
        </script>

        <script type="text/javascript">       
           var dataArr = {"array":["banana","apple","orange"]};
           var arrText = doT.template($("#arraystmpl").text());
           $("#arrays").html(arrText(dataArr));
         </script>

for conditionals 條件 {{? }}

// {{? }} if
           // {{?? }} else if
           // {{??}} else
        <div id="condition"></div>

        <script id="conditiontmpl" type="text/x-dot-template">                        
            {{? !it.name }}
            <div>Oh, I love your name, {{=it.name}}!</div>
            {{?? !it.age === 0}}
            <div>Guess nobody named you yet!</div>
            {{??}}
            You are {{=it.age}} and still dont have a name?
            {{?}}
        </script>

編碼 {{!it.uri}}

<script id="interpolationtmpl" type="text/x-dot-template">                        
           Visit {{!it.uri}} {{!it.html}}
        </script>

{{#}} 自定義編譯

<div id="part"></div>


       <script id="parttmpl" type="text/x-dot-template">                        
       {{##def.snippet:
         <div>{{=it.name}}</div>{{#def.joke}}
       #}}
       {{#def.snippet}}
       {{=it.html}}
        </script>

        var dataPart = {"name":"Jake","age":31,"html":"<div style='background: #f00; height: 30px; line-height: 30px;'>html元素</div>"};
        var defPart = {"joke":"<div>{{=it.name}} who?</div>"};
        var partText = doT.template($("#parttmpl").text(), undefined, defPart);
        $("#part").html(partText(dataPart));