Js 模版——學習小結

最近調研了一下 Javascript 模版的使用狀況。下面就簡單的總結一下 Jqeury Template 插件和 Handlebars.js 兩者的用法。

Jqeury Template 插件

1. Jquery 中生成 template 的方法有兩種，一種是字符串 string 的形式，另外一種是 <script type='text/x-jquery-tmpl'> 標籤形式。

var markup = "<li>Some content: ${name}";

$.template("testTemplate", markup);

$.tmpl("testTemplate", data).appendTo($dom);

 

  <script type="text/x-jquery-tmpl" id="tmplForm">    
        <div>${name}</div>
  </script>

  <script type="text/javascript">
         $("#tmplForm").tmpl(data).appendTo($dom);
   </script>

這個我的傾向於使用第二種形式。首先字符串形式的出錯率較高，同時也省去了建立 template 的中間步驟。第二種使用<script>標籤的形式，使建立模版的層級結構清晰，一目瞭然，更加方面容易理解。

2. options 參數的用法

$.tmpl(name, [data, options]) （或 JQuery.tmpl(data, [options])） 中有一個可選參數 options。不要小看這個可選參數的做用，它大大擴展了這個插件的功能。這也是 Jquery 類庫及其插件一向保持的很是良好的特性——可擴展性。在這個參數的支持下，一個模版的可定製性變得很是靈活。好比一開始我在使用 JQuery 的 template 的插件時，不知道其也支持了和 Handlebars 同樣的 block 功能，對於下面這樣的一個 users 數據結構，若是我要遍歷每一個 people 同時輸出其所在的 group，在不知道 block 的特性下，也着實費了一點小腦筋。

var users = {
      people: [
         { name: 'zyc', age:'12'},
         { name: 'fran', age: '22'}
      ],
　　　　likes:{
　　　　　　sports: 'basktball',
　　　　　　food: 'rice'
　　　　}
      group: 'young'  
}    

利用其 options 參數，能夠達到預期的效果：

var markup =  "<li>${name} (${age}) "+" group:"+ "${$item.group} </li>";
$.template('testTemplate', markup);
$.tmpl( "testTemplate", users.people, users).appendTo( $dom );

// 或
// 此處省略 <script type='text/x-jquery-tmpl'></script>
$("#template").tmpl( users.people, users).appendTo( $dom );

這裏 $item 即指代了 users.或者說，$item 指代的是 options 對象.這個對象還能夠有方法。例如：

{
     value: 'value',
     getValue: function(){
          return this.value   // 'value';  
     }  
}

　　3. block 用法

上面提到了 block 的用法。具體的意思就是說，能夠在 template 中某一塊區域綁定到某個數據塊。好比上面的 user 數據結構，以前的作法是將 users.people 綁定到 template 上。固然，這種方法不是很好，邏輯不清楚。全局的 template 就應該與全局的 users 對應，people 對應的應該是裏面的 li 。所以，block 的寫法爲：

<script type='text/x-jquery-tmpl' id = 'template'>
    {{each people}}
         <li>${$value.name} (${$value.age}) + " group:" + ${group}</li>
    {{/each}}
</script>

 $("#template").tmpl( users).appendTo( $dom );

　　4. IF

Jquery 中實現 IF 判斷的辦法比較簡單：

<script type='text/x-jquery-tmpl' id = 'template'>
    {{each people}}
    {{if $value.Type == "Label"}}
         <label for="value">${$value.Value}</label>
     {{else}}
          <input type="text" name="value" id="value" value="${$value.Value}" />
      {{/if}}${group}
    {{/each}}
</script>

 

Handlebars

　　1.Handlebars 的用法只學習了一種，也即 <script> 標籤這種用法。我想不出意外的話，字符串 string 這種形式，Handlebars 確定也是支持的。

Handlebars 和 Jquery 的兩點區別是：

• Handlebars 支持 (.)和(../) 操做符，這使其操做數據的時候更加靈活方便。
  

  {{ likes.sports }}
  
  {{ ../group }}

• 在使用 block 時，
  

  // 開始標記
  { { #people} } 
  
  // 結束標記 
  {{ /people }}

　　2.HELPers　& IF　

這是 Handlebars 中實現其擴展的方法，和 Jquery 中的 options 功能相似。

<script type=text/x-handlebars-template' id = 'template'>
      // 此處省略部份內容......

<td>
{{#ifCond status '==' 'on'}}
哈哈
{{else}}
呵呵
{{/ifCond}}
</td>

   </script>

Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) { switch (operator) { case '==': return (v1 == v2) ? options.fn(this) : options.inverse(this); break; default: return options.inverse(this); break; } }); var source   = $("#template").html(); var template = Handlebars.compile(source); $("#content-placeholder").html(template(users));

這裏藉助了 .registerHelper() 方法 實現了一個條件判斷的邏輯處理過程。