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

您可以尝试在model.player.ledger hook中解析afterModel：

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 }),

 });