EmberJS - 显示对象中的键

您可以使用 #each-in 帮助程序显示对象中的键，它会对传入对象的每个键进行一次迭代。

语法

<ul>
   {{#each-in array_name as |block-param| }}
      <li>{{block-param}}</li>
   {{/each}}
</ul>

在上面的代码中，模板迭代 array_name，其中包括对象和对象中指定为 block-param 的每个键。

示例

下面给出的示例使用 #each-in 帮助程序显示对象中的键。要显示项目，请使用以下命令创建一个组件 −

ember g component store-categories

现在打开在 app/component/ 下创建的 store-categories.js 以及以下代码−

import Ember from 'ember';

export default Ember.Component.extend ({
   willRender() {
      this.set('typesOfvehicles', {
         'Cars': ['Ferrari', 'Audi', 'BMW'],
         'Motor bikes': ['Harley-Davidson', 'Yamaha','Honda']
      });
   }
});

在 app/templates/ 下创建一个名为 store-categories.hbs 的模板，代码如下 −

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

要列出对象中的键，请在 app/templates/ 下创建的 application.hbs 文件中使用以下代码 −

<p>这是在对象中显示键:</p>
{{store-categories}}
{{outlet}}

输出

运行 ember 服务器，您将收到以下输出 −

emberjs_template.html