Question

我是Ember的绿色。我按照快速入门操作并运行了这些命令：

ember new ember-quickstart
ember g route index

我用索引路径创建了一个基本的Ember应用程序。我想用这条路线在屏幕上显示日期。所以我在其中创建了一些EmberObjects。

应用程序/路由/ 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
});

应用程序/模板/ index.hbs

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

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

Answer 1

模板已绑定到controller，而不是route。但是，route应该从model挂钩返回模型。

所以你可以这样做：

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

然后你的模型在你的控制器和模板上调用了model，而不是topCompanies。要解决此问题，请将其添加到控制器（ember g controller index）：

topCompanies:computed.alias('model')

您可以使用computed导入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

1 个答案: