我目前正在浏览 ember.js 指南,并且我正忙于Ember 数据部分。Ember 数据指南
本教程展示了如何创建 Ember Data 模型并将其与 mirage 结合使用,以在索引页面上呈现一些基本的租赁信息。
我的代码似乎与教程相同(见底部注释),但我的索引页面没有显示任何内容,并且我在 chrome 控制台中收到这些错误:
任何人都可以提供的任何帮助将不胜感激。
这是我的app/models/rentals.js
import Model from 'ember-data/model';
import attr from 'ember-data/attr';
export default Model.extend({
title: attr(),
owner: attr(),
city: attr(),
type: attr(),
image: attr(),
bedrooms: attr()
});
应用程序/海市蜃楼/config.js
export default function() {
this.get('/rentals', function() {
return {
data: [{
type: 'rentals',
id: 1,
attributes: {
title: 'Grand Old Mansion',
owner: 'Veruca Salt',
city: 'San Francisco',
type: 'Estate',
bedrooms: 15,
image: 'https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg'
}
}, {
type: 'rentals',
id: 2,
attributes: {
title: 'Urban Living',
owner: 'Mike Teavee',
city: 'Seattle',
type: 'Condo',
bedrooms: 1,
image: 'https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg'
}
}, {
type: 'rentals',
id: 3,
attributes: {
title: 'Downtown Charm',
owner: 'Violet Beauregarde',
city: 'Portland',
type: 'Apartment',
bedrooms: 3,
image: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Wheeldon_Apartment_Building_-_Portland_Oregon.jpg'
}
}]
};
});
}
应用程序/路由/index.js
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.store.findALL('rental');
}
});
应用程序/模板/index.hbs
<h3>Welcome to Super Rentals</h3>
<p>
We are dedicated to helping you!
</p>
{{#each model as |rental|}}
<h2>{{rental.title}}</h2>
<p>Owner: {{rental.owner}}</p>
<p>Type: {{rental.type}}</p>
<p>Location: {{rental.city}}</p>
<p>Number of Bedrooms: {{rental.bedrooms}}</p>
{{/each}}
{{#link-to "about"}}About Us!{{/link-to}}
{{#link-to "contact"}}Contact Us!{{/link-to}}
{{outlet}}
注意-- ember.js 指南与当前版本的 ember 稍有过时,所以我也在使用这些对 ember-data.md 文件的编辑。