将相册数组返回到 Ember 路线但是 {{#each}} 不工作

Question

开始学习ember。正在尝试显示 application.hbs 中的专辑列表。在路由中返回数组值后，我没有在 {{#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}}

旋转示例https://ember-twiddle.com/e1257c2778df8eb46168da67b02ab13c?openFiles=templates.application.hbs%2C

将相册数组返回到 Ember 路线但是 {{#each}} 不工作

Returning albums array to Ember Route But {{#each}} not working

ember.js

ember-model