jquery-tmpl的使用

最新推荐文章于 2021-06-20 11:07:21 发布

菜鸟果冻110

最新推荐文章于 2021-06-20 11:07:21 发布

阅读量277

点赞数 1

分类专栏： jquery 文章标签： jquery tmpl 模板渲染

本文链接：https://blog.csdn.net/weixin_43358852/article/details/83412011

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

浏览器端根据 JSON 生成 HTML 有个很苦恼的地方就是，结构不复杂的时候还好，结构一复杂，字符串的拼接就会麻烦死了，需要很小心很小心地写出几乎无法维护的 JavaScript 代码。
因此一些用模版生成HTML的的框架相继出现jquery.tmpl 就是其中的一种，下面我们来详细介绍下jquery.tmpl的用法;

jquery.tmpl的几种常用标签分别有：${}, {{each}}, {{if}}, {{else}}, {{html}}

${}等同与{{=}}是输出变量 ${}里面还可以放表达式（=和变量之间一定要有空格，否则无效）
使用过程

1.引入jquery.js

<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>

2.引入jquery-tmpl.min.js或jquery-tmpl.js

<!--<script src="js/jquery-tmpl.js" type="text/javascript" charset="utf-8"></script>-->
<script src="js/jquery-tmpl.min.js" type="text/javascript" charset="utf-8"></script>

3.定义你需要的模板

<!--定义模板，根据需求在所需处取数据中的值-->
<script type="text/x-jquery-tmpl" id='UserTmpl'>
			<li>
				<span>${ID}</span>
				<span>{{= NickName}}</span>
				<span>${Age+3}</span>

				<!--判断，等同于jq中的if  else，不同之处在于，要写end if-->
				{{if Gender}}
					<span>男</span> 
				{{else}}
					<span>女</span>
				 {{/if}}
				<!--循环,类似jq中的each，对于数组中的每个值套入模板进行操作，value类似于					this此处采用$value迭代变量，-->
				<ul>
					{{each major}}
					<li>采用$value迭代变量 ${$value.name}</li>
					{{/each}}
				</ul>

				<!--循环,通过自定义迭代变量(i,value) -->
				<ul>
					{{each(i,la) major}}
					<li>自定义迭代变量：${i+1}:{{= la.name}}</li>
					{{/each}}
				</ul>

				<!--取出html代码，此处将呈现一个按钮-->
				{{html ht}}
			</li>
</script>

4.获取json数据放入模板,并将模板渲染到页面

<script type="text/javascript">
			/*定义数据，数据一般是数组或json类型的*/
			var users = [{
					ID: "0001",
					NickName: "小白",
					Gender: false,
					Age: 18,
					major: [{
						name: "语文"
					}, {
						name: "数学"
					}],
					ht: "<button>确认</button>"
				},
				{
					ID: "0002",
					NickName: "小黑",
					Gender: true,
					Age: 20,
					major: [{
						name: "英语"
					}, {
						name: "生物"
					}],
					ht: "<button>确认</button>"
				}
			]; 
			/*("模板script标签的id").tmpl(数据，数组形式)，返回将数据套入模板后的html*/
			$("#list").append($("#UserTmpl").tmpl(users));
			
		</script>

前端页面

<body>
		<ul id="list"></ul>
</body>

结果

菜鸟果冻110

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery-tmpl的使用

浏览器端根据 JSON 生成 HTML 有个很苦恼的地方就是，结构不复杂的时候还好，结构一复杂，字符串的拼接就会麻烦死了，需要很小心很小心地写出几乎无法维护的 JavaScript 代码。因此一些用模版生成HTML的的框架相继出现jquery.tmpl 就是其中的一种，下面我们来详细介绍下jquery.tmpl的用法;jquery.tmpl的几种常用标签分别有：${}, {{each}}, {...
复制链接

扫一扫

专栏目录