在 Ember.js 中在屏幕上显示 Ember.Object

Question

我在 Ember 中是绿色的。我已经按照快速入门进行操作，并且运行这些命令：

ember new ember-quickstart
ember g route index

我已经创建了一个带有索引路由的基本 Ember 应用程序。我想使用这条路线在屏幕上显示日期。所以我在其中创建了一些 Ember 对象。

app/routes/index.js

import Object from '@ember/object';
import Route from '@ember/routing/route';

function getCompaniesJSON() {
  return [
    {
      "title": "Danone",
      "upvotes": 92,
      "downvotes": 62
    },
    {
      "title": "Bakoma",
      "upvotes": 58,
      "downvotes": 68
    },
    {
      "title": "Zott",
      "upvotes": 62,
      "downvotes": 54
    },
    {
      "title": "Jana",
      "upvotes": 72,
      "downvotes": 56
    }
  ];
}

function totalVotes(company) {
  return company.get('upvotes') + company.get('downvotes');
}

var Company = Object.extend({
  score: function() {
    return (this.get('upvotes') * 100 / totalVotes(this)).toFixed(2);
  }
});

var AppModel = Object.extend({
  topCompanies: function() {
    return this.get('companies').sort(function(a,b) {
      return totalVotes(b) - totalVotes(a);
    }).slice(0, 3);
  }.property('companies.@each.upvotes', 'companies.@each.downvotes')
});

var appModel = AppModel.create({
  companies: getCompaniesJSON().map(function(json) {
    return Company.create(json);
  })
});

export default Route.extend({
  topCompanies: appModel.topCompanies
});

app/templates/index.hbs

<ul>
{{#each topCompanies}}
  <li>{{title}} {{score}}%</li>
{{/each}}
</ul>

以上代码没有显示任何内容。控制台中没有错误。我想在屏幕上显示 topCompanies，但我不知道如何正确传递此变量。路线是正确的地方吗？或者我应该使用 Component/Controller?

Answer 1

模板绑定到 controller，而不是 route。然而，您的 route 应该 return 来自 model 挂钩的模型。

所以你可以这样做：

export default Route.extend({
  model() {
    return appModel.topCompanies
  }
});

但是你的模型在你的控制器和模板上被称为 model，而不是 topCompanies。要解决此问题，请将其添加到您的控制器 (ember g controller index):

topCompanies:computed.alias('model')

you can import computed with import {computed} from '@ember/object';.

接下来你会遇到score没有显示的问题。那是因为你将它声明为函数，而不是计算属性。所以你应该把它改成这样：

score: computed('upvotes', 'downvotes', function() {
  return (this.get('upvotes') * 100 / totalVotes(this)).toFixed(2);
}),

你也可以这样做，这是相同的，但是我 强烈建议不要这样做 因为它的旧语法：

score: function() {
  return (this.get('upvotes') * 100 / totalVotes(this)).toFixed(2);
}.property('upvotes', 'downvotes'),

在 Ember.js 中在屏幕上显示 Ember.Object

Display Ember.Object on the screen in Ember.js

javascript

ember.js

ember-cli