前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jquery tmpl遍历

jquery tmpl遍历

作者头像
全栈程序员站长
发布2022-07-02 15:57:57
1.8K0
发布2022-07-02 15:57:57
举报

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

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

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

数据格式:

代码语言:javascript
复制
var person = [
	{
		'name':'Tom',
		'age':18,
		'location':[
			{'pro':'安徽省'},
			{'pro':'六安市'},
			{'pro':'舒城县'}
		]
	},
  {
	  'name':'Jack',
	  'age':19, 
	  'location':[ 
			{'pro':'安徽省'},
			{'pro':'合肥市'}, 
		]
	}
];

模板定义:(注意scritpt标签type指定

代码语言:javascript
复制
<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:

代码语言:javascript
复制
<ul id="ul_temp"></ul>

调用:(注意两个选择器代表什么)

代码语言:javascript
复制
$("#myTemp").tmpl(person).appendTo("#ul_temp");

打印效果:

代码语言:javascript
复制
Tom Tom 1:安徽省 2:六安市 3:舒城县
Jack Jack 1:安徽省 2:合肥市 3:蜀山区

上例中,{ {each}}表示表里一个数组对象,而不是对象。index表示当前遍历的索引值,value表示当前遍历与索引对应的值(注意:是对应值,说明可能是个对象)。这里容易出错打印成[Object Object],原因你把对象的引用打印出来了

2.对象的属性的遍历

将上例数据源更改如下:

代码语言:javascript
复制
var person1 = {
  'name':'Tomson',
  'relation':'son',
  'family':[{
      'name':'Tom',
      'relation':'father'
    },{
      'name':'Monica',
      'relation':'mother'
    }]
}

模板更改如下:

代码语言:javascript
复制
<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>

打印效果:

代码语言:javascript
复制
Tomson
father:Tom
mother:Monica

{ {each(i,data) Array}} 类似jquery eachi表示索引,data表索引对象的当前对象。通过对象.访问遍历属性,中间嵌入{ {if}}可实现逻辑操作

将上处模板更改如下:

代码语言:javascript
复制
   {
  
  {each(i) family}}
    <li class="li">
      ${family[i].relation}:${family[i].name}
    </li>
  {
  
  {/each}}

可获取指定数组元素的值,当然也可以强制指定访问某个值。

就这么多了,另外常用还有${data}获取数据源值等,有问题的可以私下交流

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/148365.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.普通数组对象的遍历,关键词{ {each Array}}、$value、$index
  • 2.对象的属性的遍历
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档