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}}