EmberJS - Visualizzazione delle chiavi in ​​un oggetto

È possibile visualizzare le chiavi nell'oggetto utilizzando l' helper # each-in e itera una volta per ogni chiave passata nell'oggetto.

Sintassi

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

Nel codice precedente, template itera array_name , che include oggetti e ogni chiave nell'oggetto specificato come block-param .

Esempio

L'esempio riportato di seguito mostra le chiavi nell'oggetto utilizzando l' helper # each-in . Per visualizzare gli elementi, creare un componente utilizzando il seguente comando:

ember g component store-categories

Ora apri il file store-categories.js creato in app / component / insieme al seguente codice:

import Ember from 'ember';

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

Crea un modello chiamato store-categories.hbs in app / templates / con il seguente codice:

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

Per elencare le chiavi nell'oggetto, utilizzare il codice seguente nel file application.hbs creato in app / templates / -

<p>This is Displaying the Keys in an Object:</p>
{{store-categories}}
{{outlet}}

Produzione

Esegui il server ember e riceverai il seguente output: