如何使用 Ember 数据加载嵌套记录(主从记录)?
How to load nested records (master-detail records) using Ember Data?
主记录,app/models/account:
import DS from 'ember-data';
export default DS.Model.extend({
username: DS.attr('string'),
emailaddress: DS.hasMany('emailaddresses'),
birthdate: DS.attr('date'),
gender: DS.attr('boolean')
});
详细记录,app/models/emailaddress:
import DS from 'ember-data';
export default DS.Model.extend({
account: DS.belongsTo('account'),
emailaddress: DS.attr('string'),
verificationcode: DS.attr('string'),
isverified: DS.attr('string')
});
来自服务器的虚拟 JSON 字符串:
{"id":0,"username":"ikevin","birthdate":"Jan 30, 2017 1:34:38
PM","gender":true,"emailaddresses":[{"id":0,"emailaddress":"aaa@bbb.com","verificationcode":"AAAAAA","isverified":false}]}
适配器/app/adapters/account.js
import ApplicationAdapter from './application';
export default ApplicationAdapter.extend({
urlForQueryRecord(query) {
if (query.profile) {
delete query.profile;
return `${this._super(...arguments)}/profile`;
}
return this._super(...arguments);
}
});
路线app/route/index.js:
import Ember from 'ember';
import RSVP from 'rsvp';
export default Ember.Route.extend({
model() {
return RSVP.hash({
walletbalance: this.get('store').queryRecord('wallet', {balance: true}),
instagramfriendscount: this.get('store').queryRecord('instagram', {friendscount: true}),
accountprofile: this.get('store').queryRecord('account', {profile: true})
});
}
});
和 app/templates/components/account-profile.hbs:
<div class="box">
<div class="title">Your Profile</div>
<div>Username: {{account.accountprofile.username}}</div>
<div>Email Address: {{account.accountprofile.emailaddess}}</div>
<div>Birthdate: {{account.accountprofile.birthdate}}</div>
<div>Gender: {{account.accountprofile.gender}}</div>
</div>
我认为这里有两个问题:
在ChromeEmber插件中,模型类型"emailaddress"的数据始终为0。所以,这意味着它没有加载。
在 app/templates/components/account-profile.hbs 中,{{account.accountprofile.emailaddess}} 没有引用正确的字段。注意:目前预计只显示 1 个电子邮件地址。
如何解决这些问题以加载和显示嵌套记录?
谢谢!
是的,我自己解决了:
我将其更改为嵌套数组(如此处指定:http://thejsguy.com/2016/01/29/working-with-nested-data-in-ember-data-models.html)
所以从服务器返回的字符串变成:
{"id":0,"username":"ikevin","birthdate":"Jan 30, 2017 2:01:14
PM","gender":true,"emailaddresses":[{"emailaddress":"aaa@bbb.com","verificationcode":"AAAAAA","isverified":false}]}
并且在 .hbs 中:
<div>Email Address: {{account.accountprofile.emailaddresses.0.emailaddress}}</div>
它显示电子邮件地址!
谢谢!
主记录,app/models/account:
import DS from 'ember-data';
export default DS.Model.extend({
username: DS.attr('string'),
emailaddress: DS.hasMany('emailaddresses'),
birthdate: DS.attr('date'),
gender: DS.attr('boolean')
});
详细记录,app/models/emailaddress:
import DS from 'ember-data';
export default DS.Model.extend({
account: DS.belongsTo('account'),
emailaddress: DS.attr('string'),
verificationcode: DS.attr('string'),
isverified: DS.attr('string')
});
来自服务器的虚拟 JSON 字符串:
{"id":0,"username":"ikevin","birthdate":"Jan 30, 2017 1:34:38 PM","gender":true,"emailaddresses":[{"id":0,"emailaddress":"aaa@bbb.com","verificationcode":"AAAAAA","isverified":false}]}
适配器/app/adapters/account.js
import ApplicationAdapter from './application';
export default ApplicationAdapter.extend({
urlForQueryRecord(query) {
if (query.profile) {
delete query.profile;
return `${this._super(...arguments)}/profile`;
}
return this._super(...arguments);
}
});
路线app/route/index.js:
import Ember from 'ember';
import RSVP from 'rsvp';
export default Ember.Route.extend({
model() {
return RSVP.hash({
walletbalance: this.get('store').queryRecord('wallet', {balance: true}),
instagramfriendscount: this.get('store').queryRecord('instagram', {friendscount: true}),
accountprofile: this.get('store').queryRecord('account', {profile: true})
});
}
});
和 app/templates/components/account-profile.hbs:
<div class="box">
<div class="title">Your Profile</div>
<div>Username: {{account.accountprofile.username}}</div>
<div>Email Address: {{account.accountprofile.emailaddess}}</div>
<div>Birthdate: {{account.accountprofile.birthdate}}</div>
<div>Gender: {{account.accountprofile.gender}}</div>
</div>
我认为这里有两个问题:
在ChromeEmber插件中,模型类型"emailaddress"的数据始终为0。所以,这意味着它没有加载。
在 app/templates/components/account-profile.hbs 中,{{account.accountprofile.emailaddess}} 没有引用正确的字段。注意:目前预计只显示 1 个电子邮件地址。
如何解决这些问题以加载和显示嵌套记录?
谢谢!
是的,我自己解决了:
我将其更改为嵌套数组(如此处指定:http://thejsguy.com/2016/01/29/working-with-nested-data-in-ember-data-models.html)
所以从服务器返回的字符串变成:
{"id":0,"username":"ikevin","birthdate":"Jan 30, 2017 2:01:14 PM","gender":true,"emailaddresses":[{"emailaddress":"aaa@bbb.com","verificationcode":"AAAAAA","isverified":false}]}
并且在 .hbs 中:
<div>Email Address: {{account.accountprofile.emailaddresses.0.emailaddress}}</div>
它显示电子邮件地址!
谢谢!