#4 展示列表

英文原版：https://guides.emberjs.com/v2.13.0/templates/displaying-a-list-of-items/

为了遍历一个数组，你可以使用{{#each}}助手。传入助手的第一个参数，就是被遍历的数组。被遍历的值会赋给as后面的块参数，块参数仅在助手块的区域内有效。

比如，下面的模板遍历了一个名叫people的对象数组。遍历出的每一个数组项都会赋值给 | person |。

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

块参数，类似于函数的入参，也带有位置属性。person是上述模板中遍历出的每一项的引用名。你换成human也可以。

{{#each}}块内的部分会为每一项重复一次，并且每次都将当前项值传给person。

下面给出一个数组：

[  { name: 'Yehuda' },  { name: 'Tom' },  { name: 'Trek' }]

根据上面的数据，最终模板将会渲染成：

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

就像其他的助手一样，{{#each}}助手同样支持数据绑定。假如被遍历的数组中的项有变化，那么结果会立即自动的更新到DOM上。也就是说，Ember需要你使用一些特定的方法来更新数组。请注意，通过设定key选项可以提升模板再渲染的效率。

操作”项”的索引

在遍历期间，每一项的索引会作为第二个块参数供你使用。块参数之间通过空格分割。例子：

<ul>  {{#each people as |person index|}}    <li>Hello, {{person.name}}! You're number {{index}} in line</li>  {{/each}}</ul>

空列表

{{#each}}助手可以带一个{{else}}，当{{#each}}遍历的数组为空时，{{else}}块就会被渲染：

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

本节完