Model from Ember Data not rendering

Question

I'm trying to figure out how to fetch data with Ember Data and render. After several problems I got to this point where I get no error on the console but the store is empty after the data is loaded.

window.App = Ember.Application.create();

App.IndexRoute = Ember.Route.extend({
  model: function(){
    return this.store.find('games');
  }
});

App.GamesModel = DS.Model.extend({
  name: DS.attr('string')
});

App.GamesAdapter = DS.RESTAdapter.extend({
  host: 'http://private-0f6a1-ember37.apiary-mock.com'
});

App.GamesSerializer = DS.RESTSerializer.extend({
  normalizePayload: function(payload){
    var result = { games: payload };
    return result;
  }
});

And this is the template:

<script type="text/x-handlebars" data-template-name="index">
  <ul>
    {{#each model}}
      <li>{{name}}</li>
    {{/each}}
  </ul>
</script>

Here is the link for the code on CodePen: http://codepen.io/tarmann/pen/GJMJxq

I also tried different versions of Ember Data and Ember but with no luck.

It's working for me. I have: Added from controller displayed correctly on CodePen. — Daniel
– Daniel, Commented Jun 18, 2015 at 10:21
This one was added from the controller. I need the data from Ember Data provided by the API on this URL: private-0f6a1-ember37.apiary-mock.com/games — Bruno Tarmann
– Bruno Tarmann, Commented Jun 18, 2015 at 10:22

Daniel · Accepted Answer · 2015-06-18 15:18:03Z

1

Your problem is pluralization: you specify GamesModel instead of GameModel, you find games instead of game etc. I changed all these occurences to be aligned with what Ember expects(and you can read more about Ember standards in guides) and it works, CodePen:

App.IndexRoute = Ember.Route.extend({
  model: function(){
    return this.store.find('game');
  }
});

App.GameModel = DS.Model.extend({
  name: DS.attr('string')
});

App.GameAdapter = DS.RESTAdapter.extend({
  host: 'http://private-0f6a1-ember37.apiary-mock.com'
});

// https://www.youtube.com/watch?v=HL2bMjndviE
App.GameSerializer = DS.RESTSerializer.extend({
  normalizePayload: function(payload){
    var result = { games: payload };
    return result;
  }
});

App.IndexController = Ember.Controller.extend({
  init: function(){
    this.store.push('game', {
      id: 100,
      name: "Added from controller"
    });
  }
});

Screenshot with results: enter image description here

edited Jun 18, 2015 at 15:18

answered Jun 18, 2015 at 10:26

Daniel

18.7k8 gold badges69 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bruno Tarmann Over a year ago

I missed that, thanks a million! I still need the get my head around naming conventions in Ember. :)

Collectives™ on Stack Overflow

Model from Ember Data not rendering

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related