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

Posted 2020-06-07

一、 概述

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