大家好，又见面了，我是你们的朋友全栈君。
最近，发现大家喜欢用模板渲染一些DOM，而且常常用模板嵌套一些逻辑，看了大家用jquery tmpl较多，遇到的问题大同小异。为了避免问题重复发生，现在就个人用过的一些常用功能，作下具体介绍，主要针对遍历。其它的大家可自行看看网上教程，推荐一个：jquery Tmpl，希望对大家有所帮助
1.普通数组对象的遍历，关键词{
{each Array}}、$value、$index
{each Array}}
数据格式：
var person = [
{
'name':'Tom',
'age':18,
'location':[
{'pro':'安徽省'},
{'pro':'六安市'},
{'pro':'舒城县'}
]
},
{
'name':'Jack',
'age':19,
'location':[
{'pro':'安徽省'},
{'pro':'合肥市'},
]
}
];
模板定义：（注意scritpt标签type指定）
<script id="myTemp" type="text/x-jquery-tmpl">
<li class="li">
<span class="a" title='${name}'>${name}</span>
<span class="b" title='${age}'>{
{= name}}</span>
<span class="c" title='location'>
{
{each location}}
${$index+1}:${$value.pro}
{
{/each}}
</span>
</li>
</script>
html:
<ul id="ul_temp"></ul>
调用：(注意两个选择器代表什么)
$("#myTemp").tmpl(person).appendTo("#ul_temp");
打印效果：
Tom Tom 1:安徽省 2:六安市 3:舒城县
Jack Jack 1:安徽省 2:合肥市 3:蜀山区
上例中，
{表示表里一个数组对象，而不是对象。
{each}}$index表示当前遍历的索引值，$value表示当前遍历与索引对应的值（注意：是对应值，说明可能是个对象）。这里容易出错打印成[Object Object]，原因你把对象的引用打印出来了
2.对象的属性的遍历
将上例数据源更改如下：
var person1 = {
'name':'Tomson',
'relation':'son',
'family':[{
'name':'Tom',
'relation':'father'
},{
'name':'Monica',
'relation':'mother'
}]
}
模板更改如下：
<script id="myTemp" type="text/x-jquery-tmpl">
<span class="a" title='${name}'>${name}</span>
<span class="b" title='{
{ =relation}}'>
<ul>
{
{each(i,data) family}}
<li class="li">
${data.relation}:${data.name}
</li>
{
{/each}}
</ul>
</span>
</script>
打印效果：
Tomson
father:Tom
mother:Monica
{类似
{each(i,data) Array}}jquery each，i表示索引，data表索引对象的当前对象。通过对象.访问遍历属性，中间嵌入{
{if}}可实现逻辑操作
将上处模板更改如下：
{
{each(i) family}}
<li class="li">
${family[i].relation}:${family[i].name}
</li>
{
{/each}}
可获取指定数组元素的值，当然也可以强制指定访问某个值。
就这么多了，另外常用还有${data}获取数据源值等，有问题的可以私下交流
❤️❤️❤️❤️❤️❤️❤️❤️❤️ 如果对您有用，一分一块都是爱 ❤️❤️❤️❤️❤️❤️❤️❤️❤️
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/148365.html原文链接：https://javaforall.net
![TypeScript（1）介绍与安装[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg)
