EmberJS - Visualización de claves en un objeto

Puede mostrar las claves en el objeto utilizando el ayudante # each-in y se itera una vez por cada clave pasada en el objeto.

Sintaxis

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

En el código anterior, la plantilla itera array_name , que incluye objetos y cada clave en el objeto especificado como block-param .

Ejemplo

El ejemplo que se muestra a continuación muestra las claves en el objeto mediante el ayudante # each-in . Para mostrar los elementos, cree un componente con el siguiente comando:

ember g component store-categories

Ahora abra el store-categories.js creado en app / component / junto con el siguiente código:

import Ember from 'ember';

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

Cree una plantilla llamada store-categories.hbs en app / templates / con el siguiente código:

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

Para enumerar las claves en el objeto, use el siguiente código en el archivo application.hbs creado en app / templates / -

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

Salida

Ejecute el servidor ember y recibirá el siguiente resultado:

↰ Previous page