JsRender 作為一款JavaScript模版引擎,必不可少的會有循環功能,也就是for,但由於JsRender過於靈活,for竟然可以接受object作為循環對象。
{{for Array}}和{{for Object}}都是允許的,{{for Array}}大家都能理解,就是遍歷一個數組,逐個取出每個元素。但{{for Object}}就有點讓人匪夷所思了,而且官方文檔只是舉了個沒什么幫助的例子,其他無任何說明。
剛開始小菜以為{{for Object}}的用意是遍歷該Object的所有屬性,但仔細一想,這個功能{{props Object}}已經實現了,props標簽的作用就是遍歷Object所有屬性,有多少個屬性,就循環多少次,每次循環都會有兩個隱藏的屬性:key,prop,key代表屬性名,prop代表屬性值,用起來非常方便。
實際上,{{for Object}}並不是循環,它可以理解成進入(Into),也就是說進入到Object環境中,把當前的上下文設置為Object,類似於Handlebars.js中的with。
舉個例子:
data:
1 { 2 "title": "The A team", 3 "members": [ 4 { 5 "name": "Pete", 6 "city": "members_city", 7 "address": { 8 "city": "address_city", 9 "city1": "address_city1", 10 "city2": "address_city2" 11 } 12 } 13 ] 14 }
template markup:
1 {{for members}} 2 {{for address}} 3 <p>.{{:city}}</p> 4 {{/for}} 5 {{/for}}
result:
1 address_city
從結果可以看出,雖然members的item下也有city屬性,但由於通過{{for address}}進入到了address指向的Object中,{{:city}}直接從address中獲取了。
同時,address有三個屬性,但結果只輸出了一行,證明{{for Object}}是不會循環的,僅僅是切換一下this。