码迷,mamicode.com
首页 > 其他好文 > 详细

3.4 Templates -- Displaying A List of Items(展示一个集合)

时间:2016-01-23 10:24:38      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:

一、 概述

1. example

如果你需要遍历一个对象集合,使用Handlebars的{{#each}}

<ul>
  {{#each people key="id" as |person|}}
    <li>Hello, {{person.name}}!</li>
  {{/each}}
</ul>

上面的例子将会输出这样的结果:

<ul>
  <li>Hello, Yehuda!</li>
  <li>Hello, Tom!</li>
  <li>Hello, Trek!</li>
</ul>

2. {{#each}}是绑定的。如果你的app添加了一条新数据,或者删除了一条,不用重写任何代码DOM就会被更新。

    注意[].push()不会更新{{each}}

    添加多条目需要使用[].pushObject,这关系到Ember可变数组的方法,所以Ember可以监视这个改变。

二、Specifying Keys(指定键)

如果数组使用{{each}}遍历,key选项被用来告诉Ember怎样判断在渲染之间已经改变。

通过帮助Ember检测数组中一些相同的元素,DOM元素可以被重用,这样大大提高了渲染速度和防止一些意外的结果。

例如,{{each}}它的key设置为id: handlebars {{#each people key="id" as |person|}} {{/each}},当这个{{#each}}被重新渲染的时候,Ember将基于每个项目的id属性匹配先前被呈现的项目(排序生成的DOM元素)。

这里投一些特殊的值:

  • key:* @index指的是数组中该item的index。
  • * @item指的是数组中该item自己。这仅仅可以被用作string或者numbers数组。
  • * @guid指的为每一个对象生成唯一的标识符(Ember.guidFor)。

三、 Empty Lists(空集合)

{{#each}}还可以匹配{{else}}

example: 如果集合是空的内容将会被渲染。

 

{{#each people key="id" as |person|}}
  Hello, {{person.name}}!
{{else}}
  Sorry, nobody is here.
{{/each}}

3.4 Templates -- Displaying A List of Items(展示一个集合)

标签:

原文地址:http://www.cnblogs.com/sunshineground/p/5152853.html

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