jsrender for array 和for object语法
for array 循环数组
循环使用案例
定义数组数据
var data = {
names: ["Maradona","Pele","Ronaldo","Messi"]
}
模版中使用
{{for names}} <div> <b>{{: #index+1}}.</b> <span>{{: #data}}</span> </div> {{/for}}
输出结果
1. Maradona
2. Pele
3. Ronaldo
4. Messi
索引可以在循环中通过特殊字面量#index获取,特殊字面量#data相当于this,在本例中表示每一个name。
另jsrender中使用for循环时如使用if等判断时虽然不创建常规数据作用域,但却干扰了隐藏作用域。也就是说,{{if }}不会阻断常规数据(你传入的数据)的可见性,但会干扰隐藏数据(#index、#parent)的可见性。
所以获取索引下标时尽量使用#getIndex()获取索引,避免使用#index,除非你的应用足够简单。
可以尝试下面两者使用后的区别对比
1.
{{for names}} {{if #data.indexOf("M") == 0}} <div> <b>{{: #index+1}}.</b> <span>{{: #data}}</span> </div> {{/if}} {{/for}}
2.
{{for names}} {{if #data.indexOf("M") == 0}} <div> <b>{{: #getIndex()+1}}.</b> <span>{{: #data}}</span> </div> {{/if}} {{/for}}
for object 进入object中
这里for不代表循环,表示进入到object对象中。把当前的上下文设置为Object,类似于Handlebars.js中的with。
举个例子:
var data =
{
"title": "The A team",
"members": [
{
"name": "Pete",
"city": "members_city",
"address": {
"city": "address_city",
"city1": "address_city1",
"city2": "address_city2"
}
}
]
}
模版
{{for members}} {{for address}} <p>.{{:city}}</p> {{/for}} {{/for}}
结果
address_city
从结果可以看出,虽然members的item下也有city属性,但由于通过{{for address}}进入到了address指向的Object中,{{:city}}直接从address中获取了。
同时,address有三个属性,但结果只输出了一行,证明{{for Object}}是不会循环的,仅仅是切换一下this。
知识只有共享才能传播,才能推崇出新的知识,才能学到更多,这里写的每一篇文字/博客,基本都是从网上查询了一下资料然后记录下来,也有些是原滋原味搬了过来,也有时加了一些自己的想法