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}獲取數據源值等，有問題的可以私下交流