技术的坑分享记录

jquery tmpl遍历

最近发现大家用模板渲染一些顺带逻辑功能代码块时,用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}获取数据源值等,有问题的可以私下交流


上下篇:

相关推荐