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。