Trying to get many to many to work with Rails and Emberjs

Question

I'm trying to get many to many associations to work with Ember JS and Rails but it doesn't seem to be rendering the Role Name

Below are the files:

users/index.hbs

{{#each}}
                <tr>
                    <td>{{id}}</td>
                    <td>{{email}}</td>
                    <td>{{title}}</td>
                    <td>{{first_name}}</td>
                    <td>{{last_name}}</td>
                    <td>{{position}}</td>
                    <td>{{work_phone}}</td>
                    <td>{{company}}</td>
                    <td>{{sign_in_count}}</td>
                    <td>{{last_sign_in_ip}}</td>
                    <td>{{confirmed_at}}</td>
                    <td>{{created_at}}</td>
                    <td>
                        {{#each role in roles}}
                            {{role.name}}
                        {{/each}}
                    </td>
                    <td>
                        {{#linkTo 'user' this class='btn btn-sm btn-primary'}}Show{{/linkTo}}
                        <a href="javascript:;" {{action delete this}} class="text-danger">Delete</a>
                    </td>
                </tr>
                {{/each}}

user.js.coffee

VirtualExhibition.User = DS.Model.extend
    email: DS.attr 'string'
    password: DS.attr 'string'
    title: DS.attr 'string'
    first_name: DS.attr 'string'
    last_name: DS.attr 'string'
    position: DS.attr 'string'
    work_phone: DS.attr 'string'
    company: DS.attr 'string'
    sign_in_count: DS.attr 'number'
    last_sign_in_ip: DS.attr 'string'
    confirmed_at: DS.attr 'date'
    created_at: DS.attr 'date'
    venue: DS.hasMany 'VirtualExhibition.Venue'
    roles: DS.belongsTo 'VirtualExhibition.Role'

role.js.coffee

VirtualExhibition.Role = DS.Model.extend
    id: DS.attr 'number'
    name: DS.attr 'string'
    users: DS.hasMany 'VirtualExhibition.User'

user_serializer.rb

class UserSerializer < ActiveModel::Serializer
  attributes :id, :email, :title, :first_name, :last_name, :position, :work_phone, :company, :sign_in_count, :last_sign_in_ip, :confirmed_at, :created_at
  has_many :roles, embed: :ids
end

role_serializer.rb

class RoleSerializer < ActiveModel::Serializer
  attributes :id, :name
  has_many :users, embed: :ids
end

I'm getting role_ids as arrays as expected from my Rails application.

But I'm not sure why I'm not getting anything from {{role.name}}

Why is this the case?

JSON

{
users: [
{
id: 2,
email: "example1@gmail.com",
title: "Mr",
first_name: "AA",
last_name: "BB",
position: "Web Dev",
work_phone: "12314",
company: "CC",
sign_in_count: 0,
last_sign_in_ip: null,
confirmed_at: null,
created_at: "2013-11-08T14:27:32.401Z",
role_ids: [
4
]
},
{
id: 3,
email: "example2@example.com",
title: null,
first_name: "Host",
last_name: "Host",
position: null,
work_phone: null,
company: null,
sign_in_count: 0,
last_sign_in_ip: null,
confirmed_at: "2013-11-11T11:09:16.796Z",
created_at: "2013-11-11T11:09:16.832Z",
role_ids: [
1
]
},
{
id: 4,
email: "info@ggg.com.au",
title: null,
first_name: "Visitor",
last_name: "Visitor",
position: null,
work_phone: null,
company: null,
sign_in_count: 0,
last_sign_in_ip: null,
confirmed_at: "2013-11-11T11:09:17.123Z",
created_at: "2013-11-11T11:09:17.125Z",
role_ids: [
2
]
},
{
id: 1,
email: "aaa@saa.com.au",
title: "Mr",
first_name: "Hi",
last_name: "Hello",
position: "Web Developer",
work_phone: "123456",
company: "Comp",
sign_in_count: 11,
last_sign_in_ip: "127.0.0.1",
confirmed_at: "2013-10-29T12:26:00.583Z",
created_at: "2013-10-29T12:23:25.453Z",
role_ids: [
3
]
}
]
}

Answer 1

The template has a typo, should be each role in roles, singular word

                    {{#each role in roles}}
                        {{role.name}}
                    {{/each}}

And you should sideload roles

{
    users: [
        {
        id: 2,
        email: "example1@gmail.com",
        title: "Mr",
        first_name: "AA",
        last_name: "BB",
        position: "Web Dev",
        work_phone: "12314",
        company: "CC",
        sign_in_count: 0,
        last_sign_in_ip: null,
        confirmed_at: null,
        created_at: "2013-11-08T14:27:32.401Z",
        role_ids: [
        4
        ]
        },
        { more users...}
    ],
    roles: [
        {role object},
        {role object}
    ]
}

Or define your Hasmany relation as async

VirtualExhibition.User = DS.Model.extend
email: DS.attr 'string'
password: DS.attr 'string'
title: DS.attr 'string'
first_name: DS.attr 'string'
last_name: DS.attr 'string'
position: DS.attr 'string'
work_phone: DS.attr 'string'
company: DS.attr 'string'
sign_in_count: DS.attr 'number'
last_sign_in_ip: DS.attr 'string'
confirmed_at: DS.attr 'date'
created_at: DS.attr 'date'
venue: DS.belongsTo 'VirtualExhibition.Venue'
roles: DS.hasMany 'VirtualExhibition.Role',{async:true}

Good luck

Answer 2

You have some errors in your configuration:

user.js.coffee

VirtualExhibition.User = DS.Model.extend
    email: DS.attr 'string'
    password: DS.attr 'string'
    title: DS.attr 'string'
    first_name: DS.attr 'string'
    last_name: DS.attr 'string'
    position: DS.attr 'string'
    work_phone: DS.attr 'string'
    company: DS.attr 'string'
    sign_in_count: DS.attr 'number'
    last_sign_in_ip: DS.attr 'string'
    confirmed_at: DS.attr 'date'
    created_at: DS.attr 'date'        
    venue: DS.hasMany 'venue', async: true
    # here I think that you want hasMany instead of belongsTo, additionally the async: true is needed, since your are fetching the data using ajax.
    # and instead of "VirtualExhibition.Role" you need to use just "role"
    roles: DS.hasMany 'role', async: true

JSON

{
    id: 2,
    email: "example1@gmail.com",
    ...        
    created_at: "2013-11-08T14:27:32.401Z",
    // use roles instead of roles_id
    roles: [
        4
    ]
}

This is the fiddle with the updated code http://jsfiddle.net/marciojunior/MKu46/

In addition I recommend you to give a look in the DS.ActiveModelAdapter, to get a best integration with rails active model serializers.