text/x-jquery-tmpl 简介

jquery-tmpl 简介：

它属于 jQuery Templates plugin 插件，其 github 开源地址:

https://github.com/BorisMoore/jquery-tmpl

通常在页面中我们使用动态的拼接html代码实现动态数据展示，写起来特别酸爽，最近使用了了text/x-jquery-tmpl，感觉太好用了，从此不再烦恼前后台动态数据展示问题，此处记录一下。具体用法可以参考上面的github的demo.

使用 jquery-tmpl 前后对比：

未使用 jquery-tmpl 时的样子：

使用 jquery-tmpl 之后的样子：

用法：

引入：

<script type="text/javascript" src="../jquery/jquery.tmpl.min.js"></script>

query.tmpl 的几种常用标签分别有：

${}, {{each}}, {{if}}, {{else}}, {{html}}

不常用标签：

 {{=}},{{tmpl}} and {{wrap}}.

${}等同与{{=}}是输出变量 ${}里面还可以放表达式 （=和变量之间一定要有空格，否则无效）
{{each}}使用：提供循环逻辑，$value访问迭代变量 也可以自定义迭代变量(i,value)

<script id="cartTmpl" type="text/x-jquery-tmpl">
 {{each(rowIndex,value) list }}

 {{/each}}
</script >

此处：list是后台返回回来的，rowIndex是每行索引。value是list中每个对象。

{{if}}, {{else}}使用：提供了分支逻辑 {{else}} 相当于else if

<script id="cartTmpl" type="text/x-jquery-tmpl">
    <td class="cart-${!!count}" colspan="4">
        <span class="text">${count} items in Cart...</span>
        {{if count}}
            <span id="submit">Checkout</span>
            <span id="cancel">Remove All</span>
            {{if count>1}}
                <span id="sort"><span id="sortBtn">Sort</span>:
                    <select>
                        <option value="0" {{if sortBy==="0"}}selected{{/if}}>Name A-Z</option>
                        <option value="1" {{if sortBy==="1"}}selected{{/if}}>Name Z-A</option>
                        <option value="2" {{if sortBy==="2"}}selected{{/if}}>Date</option>
                    </select>
                </span>
            {{/if}}
            </select>
        {{/if}}
    </td>
</script>

{{html}}使用：输出变量

<script id="movieTmpl" type="text/x-jquery-tmpl">
    <div>
        <div><img src="${BoxArt.LargeUrl}" /> </div>
        <strong>${Name}</strong>
        <p>{{html Synopsis}}</p>
        <input type="button" title="Buy tickets for '${Name}'" value="Add to cart..." class="buyButton"/>
        <br/>
    </div>
</script>

{{tmpl}} 嵌套模版：

<div id="rowDataList"></div>
<script id="rowDataListTmpl" type="text/x-jquery-tmpl">
    <div>
    　　<span>${ID}</span>
    　　<span>{{tmpl($data) '#tmpl2'}}</span>
    </div>    
</script>
<script id="rowDataListTmpl2" type="type/x-jquery-tmpl">
      {{each Name}}${$value}  {{/each}}  
</script>
<script type="text/javascript">
　　var users = [{ ID: '1', Name: ['VV', 'CC'] }, { ID: '2', Name: ['RF', 'GT']}];
    $("#rowDataListTmpl").tmpl(users).appendTo('#rowDataListTmpl2');
</script>

来源：https://blog.csdn.net/weixin_43549578/article/details/103933408