【问题标题】:How to load nested records (master-detail records) using Ember Data?如何使用 Ember Data 加载嵌套记录(主从记录)?
【发布时间】:2017-01-30 05:46:50
【问题描述】:

主记录,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":"2017 年 1 月 30 日 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>

我认为这里有两个问题:

  1. 在 Chrome Ember 插件中,模型类型“emailaddress”的数据始终为 0。因此,这意味着它没有加载。

  2. 在 app/templates/components/account-profile.hbs 中,{{account.accountprofile.emailaddess}} 没有引用正确的字段。注意:目前预计只显示 1 个电子邮件地址。

如何解决这些问题以加载和显示嵌套记录?

谢谢!

【问题讨论】:

    标签: ember.js ember-data


    【解决方案1】:

    是的,我自己解决了:

    我将其更改为嵌套数组(此处指定:http://thejsguy.com/2016/01/29/working-with-nested-data-in-ember-data-models.html)

    所以服务器返回的字符串变成:

    {"id":0,"username":"ikevin","birthdate":"2017 年 1 月 30 日 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>
    

    它显示电子邮件地址!

    谢谢!

    【讨论】:

    • 我还删除了之前生成的“emailaddress”模型。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多