0
votes

I'm getting familiar with ember and can't seem to debug an issue I'm having with a generated resource. After generating a new app with ember-cli, I generated a resource:

ember generate resource contacts

This generated a few files, all seemed well. The problems began when attempting to list the contacts from a http-mock. I can see from the network tab in dev tools that the records are retrieved, but the view won't display them:

Model:

#app/models/contact.js
import DS from 'ember-data';

export default DS.Model.extend({
  title: DS.attr('string')
});

Route:

#app/routes/contacts.js
import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
       return this.get('store').find('contact');
   }
});

The view

#app/templates/contacts.hbs
<h2 id="title">Contacts</h2>

{{#each contact as |c|}}
  {{c.title}}
{{/each}}
{{outlet}}

JSON from http mock:

{
    "contacts": [
        {
            "id": 1,
            "title": "Test"
        }
    ]
}

I'm not sure what I'm doing wrong, any help is appreciated.

1

1 Answers

0
votes

Found the answer, the problem was in my view contacts.hbs. Changed to:

<h2 id="title">Contacts</h2>

{{#each model as |c|}}
  {{c.title}}
{{/each}}
{{outlet}}

Thanks to @jacefarm on this question for putting me on the right track