用模版生成HTML的的框架jquery.tmpl使用详解(2)

<div></div>
<script 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: 'think8848', Name: 'Joseph Chan', Status: 1, App: 0 }, { ID: 'aCloud', Name: 'Mary Cheung', App: 1 }, { ID: 'bMingdao', Name: 'Jerry Jin'}];
    $("#ifelse").tmpl(users).appendTo('#div_ifelse');
</script>

{{html}} 输出变量html,但是没有html编码，适合输出html代码

实例

复制代码 代码如下:

<div></div>
<script type="text/x-jquery-tmpl">
    <div>
　　　　<span>${ID}</span>
　　　　<span>{{= Name}}</span>
    　　${html}
    　　{{html html}}
    </div>
</script>
<script type="text/javascript">
　　var user = { ID: 'think8848', Name: 'Joseph Chan', html: '<button>html</button>' };
  　$("#html").tmpl(user).appendTo('#div_html');
</script>

{{tmpl}} 嵌套模版

实例

复制代码 代码如下:

<div></div>
<script type="text/x-jquery-tmpl">
    <div>
    　　<span>${ID}</span>
    　　<span>{{tmpl($data) '#tmpl2'}}</span>
    </div>    
</script>
<script type="type/x-jquery-tmpl">
    {{each Name}}${$value}  {{/each}}  
</script>
<script type="text/javascript">
　　var users = [{ ID: 'think8848', Name: ['Joseph', 'Chan'] }, { ID: 'aCloud', Name: ['Mary', 'Cheung']}];
   $("#tmpl1").tmpl(users).appendTo('#tmpl');
</script>

{{wrap}},包装器

实例

复制代码 代码如下:

<div>
    </div>
<script 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 type="text/x-jquery-tmpl">
    <table cellspacing="0" cellpadding="3"><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>

$data $item $item代表当前的模板；$data代表当前的数据。

实例：

复制代码 代码如下: