Question

我是ember.js的新手。

我有以下代码需要更改以使用多个模型从服务器检索数据（使用多个JSON / RESTful调用）。

这个（单一模型版本）工作：

在app / routes / index.js中：

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.get('store').queryRecord('wallet', {balance: true});
  }
});

并在wallet-balance.hbs中：

<div>Your Total Score: {{wallet.balance}} </div>

我改为这个并且工作原理：

import Ember from 'ember';
import RSVP from 'rsvp';

export default Ember.Route.extend({
  model() {
    return RSVP.hash({
      wallet: this.get('store').queryRecord('wallet', {balance: true})
    });
  }
});

并在wallet-balance.hbs中：

<div>Your Total Score: {{wallet.wallet.balance}} </div>

但是，如果我改为以下（＆＃34;钱包＆＃34; - ＆gt;＆＃34; anythingelse＆＃34;），它就会工作：

import Ember from 'ember';
import RSVP from 'rsvp';

export default Ember.Route.extend({
  model() {
    return RSVP.hash({
      anythingelse: this.get('store').queryRecord('wallet', {balance: true})
    });
  }
});

并在wallet-balance.hbs中：

<div>Your Total Score: {{anythingelse.wallet.balance}} </div>

我试图了解原因。它取决于定义＆＃34;钱包＆＃34; - 以及为什么改为＆＃34; anythingelse＆＃34;不上班？其他地方的代码是＆＃34;钱包＆＃34;指的是？

Answer 1

组件与周围环境隔离，因此必须传递组件所需的任何数据。因此您需要了解how to pass properties to component。

我假设，在上述三个示例中，您都包含wallet-balance这样的组件。 {{wallet-balance wallet=model}}

如果你想让{{anythingelse.wallet.balance}}这个用于第三个例子，那么你需要包含像{{wallet-balance wallet=model.anythingelse}}这样的组件

要在模板hbs文件中进行调试，您可以使用log helper，例如{{log 'model object' model}}这将在控制台中打印model对象。

这是屏幕背后的原因，

默认情况下，通过model挂钩方法，将从相应控制器的setupController属性中设置从模型挂钩返回的内容。在您的情况下，您没有覆盖setupController，因此默认行为适用。

return this.get('store').queryRecord('wallet', {balance: true});

queryRecord将返回Promise，它将被解析为单个记录wallet，并将在控制器的model属性中设置。现在model相当于单个wallet记录对象。你可以在模板`{{model.balance}}

return RSVP.hash({ anythingelse: this.get('store').queryRecord('wallet', {balance: true}) });

queryRecord将返回Promise，它将被解析为单个记录wallet，它将在对象{anythingelse:walletRecord}内设置，现在模型相当于{{1} }}。您可以在{anythingelse:walletRecord}

等模板中访问它

Answer 2

您需要在setupController()中设置模型。

import Ember from 'ember';
import RSVP from 'rsvp';

export default Ember.Route.extend({
  model() {
    return this.get('store').queryRecord('wallet', {balance: true});
  },

  setupController(controller, wallet) {
    controller.set('wallet', wallet);
  }

});

希望这有帮助。

需要帮助来了解ember.js Ember Data的工作原理

2 个答案: