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。