天天看點

JsRender for object 文法說明

     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。

繼續閱讀