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

1、 概述

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能够监视这个改变。

2、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）。

3、 Empty Lists(空集合)

{{#each}}还能够匹配{{else}}。

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

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