5 Componentes

Componentes

Paso 1

1. Crear el componente a-track
2. Editar el template del componente a-track
3. Incluir el componente en album.hbs (singular)

$ ember generate component a-track

<div class="...">
  <div class="...">{{title}}</div>
  <div class="...">{{artist}}</div>
</div>

{{#each model.tracks as |track|}}
  {{a-track
    title=track.title
    artist=model.artist
    album=model.name
    duration=track.duration}}
{{/each}}

Paso 2

1. Editar la lógica del componente a-track y responder al evento click

import Ember from 'ember';

export default Ember.Component.extend({
  click() {
    alert(this.get('title'));
  }
});

Paso 3

Los componentes son la principal forma de organizar la UI en Ember.

Un componente consiste de dos partes:

• Un template que describe la interfaz
• Una clase que define el comportamiento