<script type="text/x-jquery-tmpl"> <li> <span>ID: ${ID};</span> <span>Name: ${Name};</span><br/> <span>Langs: <ul> {{each Langs}} <li> ${$index + 1}:${$value}. </li> {{/each}} </ul> </span> </li> </script> <script type="text/javascript"> $(function () { var userLangs = [{ ID: 'hao1', Name: 'Tony', Langs: ['PHP', 'Python'] }, { ID: 'hao2', Name: 'Mary hui', Langs: ['Java', 'C#']}]; $('#eachList').tmpl(userLangs).appendTo('#ul_each'); }); </script>
其效果如下
{{each}}还有另一种写法:
Javascript
<script type="text/x-jquery-tmpl"> <li> <span>ID: ${ID};</span> <span>Name: ${Name};</span><br/> <span>Langs: <ul> {{each(i,lang) Langs}} <li> ${i+1}:${lang} </li> {{/each}} </ul> </span> </li> </script>
作用和前一种是一样的。
{{if}}和{{else}}，这两个标签应该一看就知道作用了，直接上示例:
Javascript
<script type="text/x-jquery-tmpl"> <tr> <td>${ID}</td> <td>${Name}</td> <td> {{if Langs.length > 1}} ${Langs.join('; ')} {{else}} ${Langs} {{/if}} </td> </tr> </script>
如果Langs数组元素超过1个，则用'; '连接起来，否则就直接显示Langs，效果如下：
{{html}}，直接将对象属性值作为HTML代码替换占位符
$.tmplItem()方法，使用这个方法，可以获取从render出来的元素上重新获取$item，示例:
$('tbody').delegate('tr', 'click', function () { var item = $.tmplItem(this); alert(item.data.Name); });
效果如下：
以上这篇jquery tmpl模板(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: