騰訊的模板引擎---artTemplate

主要方法如下5種，在此不詳細說artTemplate的方法，主要記錄三種使用artTemplate的方法。

　　template(id, data)

　　根據 id 渲染模板。內部會根據document.getElementById(id)查找模板。

　　如果沒有 data 參數，那么將返回一渲染函數。

　　template.compile(source, options)

　　將返回一個渲染函數。

　　template.render(source, options)

　　將返回渲染結果。

　　template.helper(name, callback)

　　添加輔助方法。

　　template.config(name, value)

第一種：模板、JS、html在同一個頁面中

在html中編寫模板：使用一個type="text/html"的script標簽存放模板：{{}}這是artTemplate獲取數據的語法

<div class="Header" id="Header"></div>
<script id="test" type="text/html">
   <img src="./images/meeting/Logo.png"  id="Logo" />
      <div class="title">
         <h1>
            <span>{{topic}}<a class="edit"></a></span>
         </h1>
      </div>
      <div class="right">
      {{if roleId==='HOST' || roleId===HOST}}
         <ul>
            <li >
               <a class="lock" status="unlock">鎖定房間</a>
            </li>
            <li >
               <a class="shut">結束會議</a>
            </li>
         </ul>
      {{/if}}
         <a class="loginOut">退出</a>
   </div>
</script> 

渲染模板：這里用到的是artTemplate的template(id, data)方法，根據ID渲染模板：

var html = template('test', loginData);
document.getElementById('Header').innerHTML = html;

第二種：模板是另外的HTML，和html不在同一頁面

在html中編寫模板：這里不需要type="text/html"的script標簽存放模板

<img src="./images/meeting/Logo.png"  id="Logo" />
<div class="title">
    <h1>
        <span>{{topic}}<a class="edit"></a></span>
    </h1>
</div>
<div class="right">
{{if roleId==='HOST' || roleId===HOST}}
    <ul>
        <li >
            <a class="lock" status="unlock">鎖定房間</a>
        </li>
        <li >
            <a class="shut">結束會議</a>
        </li>
    </ul>
{{/if}}
    <a class="loginOut">退出</a>
</div>

渲染模板：因為是需要引用html文件，所以需要用ajax調用，這里需要將dataType設置為html,表明返回的data是html形式的，async設置為false同步。

success中返回的data就是模板引擎的html內容，這里渲染模板用的是template.compile(source, options)和render（返回結果）。

$.ajax({
             type: "GET",
             async:false,
             url: "../tpl/header.html",
             data: loginData,
             dataType: "html",
             success: function(data){
               var render = template.compile(data);
               var html = render(loginData);
               $("#Header").html("").html(html);                  
            }
});

以上兩種方法都可以，我更喜歡第二種，因為將模板剝離出去，便於后期維護。

第三種：require和artTemplate結合。

使用require模塊化加載模板引擎，需要先配置requireJS文件。

require.config({
    baseUrl:"/",
    urlArgs : 'v=' + Date.now(),
    paths: {
      'css' : 'assets/libs/core/require/css',
      'text': 'assets/libs/core/require/text',
      'template':'assets/libs/components/artTemplate/3.0.0/template',

});

將require源文件配置的require文件加載到頁面上

<script src="assets/libs/core/require/2.1.18/require-debug.js"></script>
<script src="assets/libs/core/require-debug.js"></script>

在html中編寫模板：這里也不需要type="text/html"的script標簽存放模板

<img src="./images/meeting/Logo.png"  id="Logo" />
<div class="title">
    <h1>
        <span>{{topic}}<a class="edit"></a></span>
    </h1>
</div>
<div class="right">
{{if roleId==='HOST' || roleId===HOST}}
    <ul>
        <li >
            <a class="lock" status="unlock">鎖定房間</a>
        </li>
        <li >
            <a class="shut">結束會議</a>
        </li>
    </ul>
{{/if}}
    <a class="loginOut">退出</a>
</div>

渲染模板：以模塊化渲染用如下require可實現

也可用define都可實現define(['jquery', 'text!app/left-nav/leftnav.html', 'template'], function($, Module, header, template) {})

require(['jquery','app/header/Header'],function($,header){
    var headerTpl = template.compile(header),
        html,menuData;
    html = headerTpl({
        data: {roleId:"COMMON",topic:"測試"}//傳入所需要的數據
    });
    $("#Header").html("").html(html);   
});