在Ember.js的屏幕上顯示Ember.Object

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掛鈎中返回model 。

因此，您可以執行以下操作：

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

但是隨后您的模型在控制器和模板上而不是topCompanies上被稱為model 。 要解決此問題，請將其添加到您的控制器（ 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'),