标签：
最近发现大家用模板渲染一些顺带逻辑功能代码块时，用jquery tmpl较多，遇到了一些问题，现在就个人以前研究过的一切常用功能作介绍，主要针对遍历，其它的大家可以自行浏览一起网站，如：http://www.cnblogs.com/piaopiao7891/archive/2013/04/22/3035122.html 希望对大家有所帮助
1.普通数组对象的遍历，关键词{{each Array}}、$value、$index
数据格式：
var person = [
{‘name‘:‘Tom‘,‘age‘:18,‘location‘:[{‘pro‘:‘安徽省‘},{‘pro‘:‘六安市‘},{‘pro‘:‘舒城县‘}]},
{‘name‘:‘Jack‘,‘age‘:19,‘location‘:[{‘pro‘:‘安徽省‘},{‘pro‘:‘合肥市‘},{‘pro‘:‘蜀山区‘}]}
];
模板定义：（注意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}获取数据源值等，有问题的可以私下交流
标签：
原文地址：http://www.cnblogs.com/jyjin/p/4180392.html
