JsRender for object語法簡介_javascript技巧

本文簡要講述了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:

複製程式碼 程式碼如下:

  {
    "title": "The A team",
    "members": [
      {
        "name": "Pete",
        "city": "members_city",
        "address": {
          "city": "address_city",
          "city1": "address_city1",
         "city2": "address_city2"
       }
     }
   ]
 }

template markup:

複製程式碼 程式碼如下:

{{for members}}
   {{for address}}
    

.{{:city}}

   {{/for}}
 {{/for}}

result:

複製程式碼 程式碼如下:

address_city

 

從結果可以看出，雖然members的item下方也有city屬性，但由於透過{{for address}}進入了address指向的Object中，{{:city}}直接從address中取得了。

同時，address有三個屬性，但結果只輸出了一行，證明{{for Object}}是不會循環的，只是切換一下this。

希望本文所述對大家JsRender程式設計的學習有所幫助。