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

輸出

執行 ember 伺服器，你將收到以下輸出 -