#5 遍历Hash对象

英文原版：https://guides.emberjs.com/v2.13.0/templates/displaying-the-keys-in-an-object/

如果你需要在模板中显示javascript对象的key或者value，那么你可以使用{{#each-in}}助手：

/app/components/store-categories.js

import Ember from 'ember';

export default Ember.Component.extend({
  willRender() {
    // Set the "categories" property to a JavaScript object
    // with the category name as the key and the value a list
    // of products.
    this.set('categories', {
      'Bourbons': ['Bulleit', 'Four Roses', 'Woodford Reserve'],
      'Ryes': ['WhistlePig', 'High West']
    });
  }
});

/app/templates/components/store-categories.hbs

<ul>
  {{#each-in categories as |category products|}}
    <li>{{category}}
      <ol>
        {{#each products as |product|}}
          <li>{{product}}</li>
        {{/each}}
      </ol>
    </li>
  {{/each-in}}
</ul>

{{#each-in}}会按照key来进行遍历。其中 category参数就是对象中的key，products参数是key对应的value。

上面的例子最终会得到下面的结果：

<ul>
  <li>Bourbons
    <ol>
      <li>Bulleit</li>
      <li>Four Roses</li>
      <li>Woodford Reserve</li>
    </ol>
  </li>
  <li>Ryes
    <ol>
      <li>WhistlePig</li>
      <li>High West</li>
    </ol>
  </li>
</ul>

排序

上面例子中数据展示的顺序与定义时的顺序是一样的。但是，如果你想要人为的对它进行排序，那么你需要利用key来构建一个数组，并且通过javascript的方法，如:sort()来对此数组进行排序，然后使用{{#each}}助手来输出。

空集合

{{#each-in}}助手同样也带有{{else}}，如果被遍历的对象为空，null或者undefined。那么就会去渲染{{else}}块中的内容：

{{#each-in people as |name person|}}
  Hello, {{name}}! You are {{person.age}} years old.
{{else}}
  Sorry, nobody is here.
{{/each-in}}

本节完