4 Consumo de datos

Consumo de datos

Paso 1

1. Crear el modelo album
2. Intentar obtener todos los albums en la ruta albums

$ ember generate model album artist name image

model() {
  return this.store.findAll('album');
}

¡Mm, esto así no funciona!

Paso 2

1. Crear un adaptador
2. Cambiar a RESTAdapter y configurar un namespace
3. Ejecutar el servidor de desarrollo con la opción --proxy

$ ember generate adapter application

import RESTAdapter from 'ember-data/adapters/rest';

export default RESTAdapter.extend({
  namespace: 'api'
});

$ ember server --proxy http://em-ng-workshop.herokuapp.com/

Paso 3

1. Iterar sobre todos los álbumes y mostrar los datos en el template albums.hbs (plural)
2. Notar que estamos pasando una clave a {{link-to}}

{{#each model as |album|}}
  <div class="media">
    {{#link-to "album" album.id}}
      <img alt={{album.name}} class="album" src={{album.image}}>
    {{/link-to}}
  </div>
{{/each}}

Paso 4

1. Cambiar la ruta de album (en singular) para recibir la clave del modelo
2. Actualizar el template album.hbs (singular) para mostrar la información del álbum

this.route('album', {
  path: '/albums/:album_id'
});

<div class="col-1">
  <img src={{model.image}}>
</div>

<div class="playlist-title">{{model.name}}</div>
<div class="playlist-desc">{{model.artist}}</div>

Paso 5

1. Generar el modelo track
2. Actualizar el modelo album para cargar sus tracks

$ ember generate model track title duration sourceUrl

import { hasMany } from 'ember-data/relationships';

export default Model.extend({
  tracks: hasMany('track')
});

Paso 6

1. Actualizamos el template album.hbs (singular) para mostrar los tracks de un álbum

{{#each model.tracks as |track|}}
  <div class="...">
    <div class="...">{{track.title}}</div>
    <div class="...">{{model.artist}}</div>
    <div class="...">{{model.name}}</div>
    <div class="...”>{{track.duration}}</div>
  </div>
{{/each}}