码迷,mamicode.com
首页 > Web开发 > 详细

jsrender for array 和for object语法

时间:2015-06-13 15:42:02      阅读:354      评论:0      收藏:0      [点我收藏+]

标签:

 

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。

 

jsrender for array 和for object语法

标签:

原文地址:http://www.cnblogs.com/hwaggLee/p/4573528.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!