Возвращение массива альбомов в Ember Route, но {{#each}} не работает

Question

Начал изучать тлеющий уголь. Попытка отобразить список альбомов в application.hbs. После возврата значений массива в Routes я не получаю объект массива в {{#each}}. Пожалуйста, дайте мне знать, что я делаю неправильно.

Маршруты

import Ember from 'ember';
import albums from 'bumbox/models/album-fixtures';

export default Ember.Route.extend({
  model: function() {
    return albums;
  }
});

альбом-fixtures.js

export default [{
  id: "1",
  artwork: "images/the-morning-after.jpg",
  name: "The Morning After",
  artist: "GOLDHOUSE",
  isExplicit: false,
  songs: [ "11", "12", "13", "14" ]
}, {
  id: "2",
  artwork: "images/dusk-to-dawn.jpg",
  name: "Dusk to Dawn",
  artist: "Emancipator",
  isExplicit: false,
  songs: [ "21", "22", "23", "24" ]
}, {
  id: "3",
  artwork: "images/the-heist.jpg",
  name: "The Heist",
  artist: "Macklemore & Ryan Lewis",
  isExplicit: true,
  songs: [ "31", "32", "33", "34" ]
}, {
  id: "4",
  artwork: "images/some-nights.jpg",
  name: "Some Nights",
  artist: "fun.",
  isExplicit: true,
  songs: [ "41", "42", "43", "44" ]
}];

application.hsb

<div class="album-list">
{{#each}}
  <div class="album">
    <a class="ember-view" href="/album/1">
      <img src="{{artwork}}">
    </a>
    <p class="album-name">{{name}}</p>
    <p class="album-artist">{{artist}}</p>
    <p class="song-count">{{songs}}</p>
  </div>
{{/each}}
</div>

Answer 1

Вам нужно использовать {{#each model as |album|}} итерировать массив модели. Шаблон должен выглядеть так:

{{#each model as |album|}}
  <div class="album">
    <a class="ember-view" href="/album/1">
      <img src="{{album.artwork}}">
    </a>
    <p class="album-name">{{album.name}}</p>
    <p class="album-artist">{{album.artist}}</p>
    <p class="song-count">{{album.songs}}</p>
 </div>
{{/each}}

Пример Twiddle https://ember-twiddle.com/e1257c2778df8eb46168da67b02ab13c?openFiles=templates.application.hbs%2C