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