jQuery .tmpl(), .template()学习资料小结(3)

      <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代码替换占位符：

Javascript

<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: 'think8848', Name: 'Joseph Chan', Ctrl: '<input type="button" value="Demo" />' }, { ID: 'aCloud', Name: 'Mary Cheung', Ctrl: '<input type="text" value="Demo" />'}];  

        $('#html').tmpl(ctrls).appendTo('#htmlRows');  

    });  

</script>  

效果:

{{tmpl}}，前面已经提过该标签了，这里再给一个使用参数的例子:

Javascript

<script id="tmpl1" type="text/x-jquery-tmpl">  

    <tr><td>${ID}</td><td>${Name}</td><td> {{tmpl($data) '#tmpl2'}}</td></tr>         

</script>  

<script id="tmpl2" type="type/x-jquery-tmpl">  

    {{each Langs}}${$value}  {{/each}}     

</script>  

<script type="text/javascript">  

    $(function () {  

        var userLangs = [{ ID: 'think8848', Name: 'Joseph Chan', Langs: ['Chinese', 'English'] }, { ID: 'aCloud', Name: 'Mary Cheung', Langs: ['Chinese', 'French']}];  

        $('#tmpl1').tmpl(userLangs).appendTo('#tmplRows');  

    });  

</script>  

效果:

{{wrap}},包装器，这回不需要指定对哪一个元素使用模板了，直接生成模板的包装器，示例:

Html

 

<div id="wrapDemo">  

</div>  

Javascript

<script id="myTmpl" type="text/x-jquery-tmpl">  

The following wraps and reorders some HTML content:  

{{wrap "#tableWrapper"}}  

    <h3>One</h3>  

    <div>  

        First <b>content</b>  

    </div>  

    <h3>Two</h3>  

    <div>  

        And <em>more</em> <b>content</b>...  

    </div>  

{{/wrap}}  

</script>  

<script id="tableWrapper" type="text/x-jquery-tmpl">  

<table cellspacing="0" cellpadding="3" border="1"><tbody>  

    <tr>  

        {{each $item.html("h3", true)}}  

            <td>  

                ${$value}  

            </td>  

        {{/each}}  

    </tr>  

    <tr>  

        {{each $item.html("div")}}  

            <td>  

                {{html $value}}  

            </td>  

        {{/each}}  

    </tr>  

</tbody></table>  

</script>  

<script type="text/javascript">  

    $(function () {  

        $('#myTmpl').tmpl().appendTo('#wrapDemo');  

    });  

</script>  

效果:

$.tmplItem()方法，使用这个方法，可以获取从render出来的元素上重新获取$item，示例:

 

$('tbody').delegate('tr', 'click', function () {  

    var item = $.tmplItem(this);  

    alert(item.data.Name);  

});  

效果: