Emberjs-temp-displaying-keys

EmberJS-オブジェクト内のキーの表示

_＃each-in_ヘルパーを使用してオブジェクトのキーを表示でき、オブジェクトで渡されるキーごとに1回反復します。

構文

<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>This is Displaying the Keys in an Object:</p>
{{store-categories}}
{{outlet}}

出力

エンバーサーバーを実行すると、次の出力が表示されます-

オブジェクトのEmber.jsテンプレート表示キー