How to display a hasMany association

Question

I'm new to ember and I created a model like this :

# app/models/skill.js
export default DS.Model.extend({
  name: DS.attr('string'),
  description: DS.attr('string'),
  link: DS.attr('string'),
  user: DS.hasMany('user')
});

I have this route :

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

export default Ember.Route.extend({
  model: function(params) {
    return this.store.find('skill', params.id);
  }
});

This router :

# app/router.js
import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.resource('users', function() {
    this.route('index', { path: '/'} );
    this.route('signup');
  });
  this.resource('skills', function() {
    this.route('index', { path: '/' });
  });
  this.resource('skill', { path: '/skills/:id' });
});

export default Router;

And this template :

# app/templates/skill.hbs
{{#link-to 'skills.index'}}Back{{/link-to}}
{{model.name}}
{{model.description}}

{{#each user in model.user}}
  {{user.nickname}}
{{/each}}

I simply want to have a list of users with their nicknames. This is the response from my api :

{
  "skills": {
    "id": 1,
    "name": "Ember",
    "description": "JS Framework",
    "link": "emberjs.com"
  },
  "users": [
    {
      "id": 1,
      "email": null,
      "nickname": null,
      "bio": null,
      "created_at": "2015-06-21T10:40:34.555Z",
      "updated_at": "2015-06-21T10:40:34.555Z"
    },
    {
      "id": 2,
      "email": "test",
      "nickname": "dougui",
      "bio": "blabla",
      "created_at": "2015-06-21T10:40:50.493Z",
      "updated_at": "2015-06-21T10:40:50.493Z"
    },
    {
      "id": 3,
      "email": null,
      "nickname": null,
      "bio": null,
      "created_at": "2015-06-21T20:51:29.546Z",
      "updated_at": "2015-06-21T20:51:29.546Z"
    },
    {
      "id": 4,
      "email": null,
      "nickname": null,
      "bio": null,
      "created_at": "2015-06-21T20:55:11.163Z",
      "updated_at": "2015-06-21T20:55:11.163Z"
    },
    {
      "id": 5,
      "email": null,
      "nickname": null,
      "bio": null,
      "created_at": "2015-06-21T20:55:51.231Z",
      "updated_at": "2015-06-21T20:55:51.231Z"
    },
    {
      "id": 6,
      "email": "email",
      "nickname": "nickname",
      "bio": null,
      "created_at": "2015-06-22T00:01:47.089Z",
      "updated_at": "2015-06-22T00:01:47.089Z"
    }
  ]
}

There is all information about skill and users but nothing is shown.

Why my list is not rendered?

Thanks!

Edit 1

Now, my api is sending this {"skill":{"id":2,"name":"Rails","description":"test","user_ids":[2]}} .

I have this model :

export default DS.Model.extend({
  name: DS.attr('string'),
  description: DS.attr('string'),
  link: DS.attr('string'),
  users: DS.hasMany('users', { async: true })
});

I tried also with :

users: DS.hasMany('users', { async: true })

I don't know what to do. Is it possible to have an example with the current version?

Answer 1

Ember data expects that you will give it a object called skill not skills ( skills will be ok for requesting multiple skills, not one instance).

Next thing: your model expects users array in skill object. Right now you are sending it separately.

And last one... You have put full users object instead of just ids of these objects. In that case, you have to add flag {embedded: 'always'} to users property (read more here )