text/x-jquery-tmpl使用记录

最新推荐文章于 2021-05-25 10:04:48 发布

喝醉的咕咕鸟

最新推荐文章于 2021-05-25 10:04:48 发布

阅读量2.7k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43549578/article/details/103933408

版权

前端专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍jQuery-Tmpl模板引擎的使用方法，包括基本标签如${}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

github:

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

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

未使用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>

这几个够用了，其他的可以查看github.