ember 模型呈现奇怪的行为

Question

在尝试使用 ember 和 ember-localforage-adapter 时，我注意到一个奇怪的行为。

ember.debug.js:4888DEBUG: Ember      : 1.12.0
ember.debug.js:4888DEBUG: Ember Data : 1.0.0-beta.18
ember.debug.js:4888DEBUG: jQuery     : 1.11.3

我有三个模型：

/app/models/ledger.js

import DS from 'ember-data';

export default DS.Model.extend({
  title: DS.attr('string'),

  purchases: DS.hasMany('purchase', {async: true}),
  players: DS.hasMany('player', {async: true}),
});

/app/models/purchase.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  amount: DS.attr('number'),

  ledger: DS.belongsTo('ledger', {async: true}),
  player: DS.belongsTo('player', {async: true})
});

/app/models/player.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  balance: DS.attr('number'),

  ledger: DS.belongsTo('ledger',{ async: true }),
  purchases: DS.hasMany('purchase', {async: true}),
});

还有一条简单的路线：

/app/routes/purchase.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(params) {
    return this.store.find('purchase', params.purchase_id);
  }
});

我的实验模板是

/app/templates/purchase.hbs

name: {{model.name}}
<br>
amount: {{model.amount}}
<br>
player: {{model.player.name}}

它可以向我显示所有调用的属性。但是，如果我添加另一行，例如

name: {{model.name}}
<br>
amount: {{model.amount}}
<br>
player: {{model.player.name}}
<br>
ledger: {{model.player.ledger.title}}

它只显示玩家的名字，从不显示账本标题。应如何在存储中加载请求的记录以使其在我的模板中可用？

Answer 1

看完this我把属性payer添加到购买模型中：

  payer: function(){
    return DS.PromiseObject.create({
      promise: this.get( 'player' )
    });
  }.property('')

在模板中使用而不是player:

<h3>show purchase</h3>

model.name: <strong>{{model.name}}</strong>
<br>
model.amount: <strong>{{model.amount}}</strong>
<br>
<br>
model.payer.name: <strong>{{model.payer.name}}</strong>
<br>
model.payer.ledger.title: <strong>{{model.payer.ledger.title}}</strong>
<br>
<br>
model.player.name: <strong>{{model.player.name}}</strong>
<br>
model.player.ledger.title: <strong>{{model.player.ledger.title}}</strong>

这种方法与 Artych 建议的方法非常相似，但可能由于我的 Rails 背景，我更喜欢通过模型而不是与路由关联的控制器从任何地方访问关联记录

以下 gif（如果没有看到动画，请下载）显示了两者的行为：

有人可以解释发生了什么吗？为什么model.player.name在model.plyer.ledger.title出现的时候消失了？考虑到两者都返回 DS.PromiseObject，从模板的角度来看，payer 和 player 有什么区别？

Answer 2

你可以尝试在afterModel钩子中解析model.player.ledger：

afterModel: function(model) {
  var controller = this.controllerFor('purchase');

  model.get('player').then(function(player) {
    controller.set('player', player);
    return player.get('ledger');

  }).then(function(ledger){
    controller.set('playerLedger', ledger);
  }, function(error) {
    console.log("promise is not resolved", error);
  });
}

在模板中

 {{player.name}} | {{playerLedger.title}}

我想你可以看到为什么model.player.ledger 没有被解析或者它可能是空的。

player 模型中有错字。应该是：

 //app/models/player.js
 import DS from 'ember-data';
 export default DS.Model.extend({
   // ...

   ledger: DS.belongsTo('ledger', { async: true }),
   //not ledger: DS.belongsTo({ async: true }),

 });