jquery.tmpl使用总结

jquery.tmpl 是一款 jQuery 的模板插件，是由微软向 jQuery 官方贡献的轻量级模板插件，它的体积很小，兼容性强，只需引入 jQuery 就不需要再依赖别的了。

常用标签有：`${}`, `{{each}}`, `{{if}}`, `{{else}}`, `{{html}}`。

不常用标签：`{{=}}`，`{{tmpl}}`，`{{wrap}}`。

1、`${}` 等同与 `{{=}}` 是输出变量 `${}` 里面还可以放表达式 （=和变量之间一定要有空格，否则无效）。
示例：
```html
<div id="templateNameDiv">
</div>
<script id="templateName" type="text/x-jquery-tmpl">
    <div>
    　　<span>${id}</span>
    　　<span>{{= name}}</span>
    　　<span>${Number(num)+1}</span>
    　　<span>${status}</span>
    </div>
</script>
<script type="text/javascript">
 　　var users = [{id:1,name:'张三',num:'1',status:1},{ID:2,name:'李四',num:'2'}];
　　 $("#templateName").tmpl(users).appendTo('#templateNameDiv');
</script>
```

2、`{{each}}` 提供循环逻辑，`$value` 访问迭代变量，也可以自定义迭代变量 (i,value)。

示例：
```html
<div id="eachDiv">
</div>
<script id="each" type="text/x-jquery-tmpl"> 
    <h3>users</h3>
    {{each(i,user) users}}
        <div>${i+1}:{{= user.name}}</div>
        {{if i==0}}
            <h4>group</h4>
            {{each(j,group) groups}}
                <div>${group.name}</div>
            {{/each}}
        {{/if}}
    {{/each}}
    <h3>depart</h3>
    {{each departs}}
        <div>{{= $value.name}}</div>
    {{/each}}
</script> 
<script type="text/javascript">
　　 var eachData = {users:[{name:'张三'},{name:'李四'}],groups:[{name:'一组'},{name:'二组'}],departs:[{name:'销售部'}]};
　　 $("#each").tmpl(eachData).appendTo('#eachDiv');
</script>
```

3、`{{if }}` `{{else}}` 提供了分支逻辑 `{{else}}` 相当于 `else if`。

示例：
```html
<div id="ifelseDiv"></div>
<script id="ifelse" type="text/x-jquery-tmpl"> 
    <div><span>${id}</span><span>{{= name}}</span>
        {{if status}}
            <span>status${status}</span>
        {{else app}}
            <span>app${app}</span>
        {{else}}
            <span>none</span>
        {{/if}}
    </div>
</script> 
<script type="text/javascript">
　　 var users = [{id:1,name:'张三',status:1,app:0},{id:2,name:'李四',app:1},{id:3,name:'王五'}];
    $("#ifelse").tmpl(users).appendTo('#ifelseDiv');
</script>
```

4、`{{html}}` 输出变量 html，但是没有 html 编码，适合输出 html 代码。
示例：
```html
<script id="html" type="text/x-jquery-tmpl"> 
      <tr><td>${id}</td><td>${name}</td><td>{{html ctrl}}</td></tr> 
</script>
<script type="text/javascript">
    $(function () {
        var ctrls = [{id:1,name:'张三',ctrl:'<input type="button" value="Demo" />'},{id:2,name:'李四',ctrl:'<input type="text" value="Demo" />'}];
        $('#html').tmpl(ctrls).appendTo('#htmlRows');
    });
</script>
```

5、`tmpl()` 有两个比较有用的属性：`tem`、`data`。`item` 代表当前的模板；`data` 代表当前的数据。
示例：
```html
<table cellspacing="0" cellpadding="3" border="1">
    <tbody id="propertyRows">
    </tbody>
</table>
<script id="property" type="text/x-jquery-tmpl">
    <tr><td>${id}</td><td>${$data.name}</td><td>${$item.getLangs('; ')}</td></tr> </script>
<script type="text/javascript">
    $(function () {
        var userLangs = [{id:1,name:'张三',Langs:['Chinese','English']},{id:2,name:'李四',Langs:['Chinese','French']}];
        $('#property').tmpl(userLangs, {
            getLangs: function (separator) {
                return this.data.Langs.join(separator);
            }
        })
        .appendTo('#propertyRows');
    });
</script>
```

6、`tmplItem()` 方法，使用这个方法可以获取从 `render` 出来的元素上重新获取 `item`。
```javascript
$('tbody').delegate('tr', 'click', function () {
    var item = $.tmplItem(this);
    alert(item.data.name);
});
```

jquery.tmpl使用总结

相关文章

热门标签

热门文章