开始学习ember。尝试在application.hbs中显示专辑列表。在路由中返回数组值后,我不会在{{#each}}中获得数组对象。请让我知道我做错了什么。
路由
import Ember from 'ember';
import albums from 'bumbox/models/album-fixtures';
export default Ember.Route.extend({
model: function() {
return albums;
}
});
poser-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>
您需要使用 {{#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://embr-twiddle.com/e1257c2778df8eb46168da67b02ab13c?openfiles=templates.application.application.hbs,