Display Ember.Object on the screen in Ember.js

Question

I'm green in Ember. I've followed the quickstart and I run those commands:

ember new ember-quickstart
ember g route index

I've created a basic Ember application with an index route. I've wanted to use this route to display the date on the screen. So I've created some EmberObjects in it.

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('[email protected]', '[email protected]')
});

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>

Above code is displaying nothing. No errors in the console. I'd like to display topCompanies on the screen, but I've no idea how to pass this variable correctly. Is a Route a correct place to do it? Or I should use Component/Controller?

Answer 1

The template is bound to the controller, not the route. Your route however should return the model from the model hook.

So you could do something like this:

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

But then your model its called model on your controller and template, not topCompanies. to fix this add this to your controller (ember g controller index):

topCompanies:computed.alias('model')

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

---

Next you will have the problem that score is not shown. Thats because you declared it as function, not as computed property. So you should change it to this:

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

You also could do this which is identical, however I strongly recommend against it because its old syntax:

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