jquery tmpl遍历

大家好，又见面了，我是你们的朋友全栈君。

最近，发现大家喜欢用模板渲染一些DOM，而且常常用模板嵌套一些逻辑，看了大家用jquery tmpl较多，遇到的问题大同小异。为了避免问题重复发生，现在就个人用过的一些常用功能，作下具体介绍，主要针对遍历。其它的大家可自行看看网上教程，推荐一个：jquery Tmpl，希望对大家有所帮助

1.普通数组对象的遍历，关键词{
{each Array}}、$value、$index

数据格式：

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}获取数据源值等，有问题的可以私下交流

❤️❤️❤️❤️❤️❤️❤️❤️❤️ 如果对您有用，一分一块都是爱 ❤️❤️❤️❤️❤️❤️❤️❤️❤️