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。

 

转载于:https://www.cnblogs.com/hwaggLee/p/4573528.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值