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() 方法 实现了一个条件判断的逻辑处理过程。