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

时间: 2024-10-31 21:19:00

jquery tmpl遍历的相关文章

jQuery tmpl用法总结

原文:jQuery tmpl用法总结 之前很是头疼循环数据的渲染,搞一大堆的命名,一点点的赋值,很是麻烦,今天学习了一下jQuery插件tmpl,下面抛出一些使用方法,供以后参考: 官方网址:http://web.archive.org/web/20121014080309/http://api.jquery.com/jquery.tmpl/ github网址:https://github.com/jquery/jquery-tmpl        http://jquery.github.co

jQuery Tmpl不详细讲解

在Ajax横道的今天,我们在页面交互上有了更高的要求,动态生成HTML毫无疑问是其中的一种.动态生成HTML的方式多种多样,其核心不外乎在前段(JS)或者后端(C#/PHP…)将数据组装成我们想要的模版,最终通过一定的方法输出给用户(innerHTML.documentWrite等方式). 缺点 1)拼接字符串的过程容易出错,常常忘了'/”>等匹配的符号. 2)修改前台模版的同时容易遗忘同步更改动态生成的模版. 3)拼接字符串不直观和美观,不利于查找错误,例如:数据中如果存在HTML内容,会导致

jquery tmpl模板

之前用模板渲染都是用angular,无意间发现了jquery tmpl这种轻量级,其文档在这里 官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][options]) 其中参数data的用途很明显:用于render的数据,可以是任意js类型,包括数组和对象.options一般情况下都是选项了,官方指出,此处的options是一个用户自定义的键值对的map,继承自tmplItem数据结构,适用于模板render动作期间. 在这里可以下

JQuery.tmpl()的用法

动态请求数据来更新页面是现在非常常用的方法,现在通过Ajax请求返回的数据更多的是json对象, 为了解决js动态拼接数据这方面的问题,JavaScript 也可以利用模版来解决这些问题,比如基于 jQuery 的 jquery.tmpl. Tmpl提供了几种tag: ${}:等同于{{=}},是输出变量,通过了html编码的. {{html}}:输出变量html,但是没有html编码,适合输出html代码. {{if }} {{else}}:提供了分支逻辑. {{each}}:提供循环逻辑,$

jquery tmpl 详解

动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在浏览器端拼数据就在服务器端拼数据.不过,从传输量方面来看,返回 HTML 不划算,而在 web 传输方面,现在更多的是使用 JSON 而不是 XML. 浏览器端根据 JSON 生成 HTML 有个很苦恼的地方就是,结构不复杂的时候还好,结构一复杂,就想死了,需要很小心很小心地写出几乎无法维护的 Ja

让jquery.tmpl.js支持index序号

在写Web程序时,想简单处理会使用JS模板,常用的是Jquery的jquery.tmpl.js插件.整个插件还是比较好用的,后续有机会结合实际应用案例,分享下应用方法. 本次文章想分享的一点是其中的一个很小的细节:支持行标index. 具体的使用场景是:通过表格展示数据,同时第一列为序号,会存在删除.新增行的按钮操作. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="../_common/jquery

Jquery节点遍历

jquery 节点遍历 <html> <head> <title></title> <script src="Jquery/jquery-1.10.2.min.js" type="text/javascript"></script> </head> <body> <div>AA</div> <div>BB</div> <

jquery:树遍历

.children() 获得元素集合中每个匹配元素的子元素,选择器选择性筛选. <!DOCTYPE html> <html> <head> <style> body { font-size:16px; font-weight:bolder; } p { margin:5px 0; } </style> <script src="http://code.jquery.com/jquery-latest.js"><

JQuery+javascript遍历tr td

function InitTable(tableID, trName) { $(tableID + " tr").each(function (index, element) { if (index == 0 || index == $(tableID + " tr").length - 1) { return true; } var s = element.cells[0].innerHTML; if ($.trim(s) != '') { if (s.index