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: "[email protected]",
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: "[email protected]",
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: "[email protected]",
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: "[email protected]",
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
]
}
]
}

Marcio Junior Marcio Junior · Accepted Answer · 2013-11-13T14:44:36

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: "[email protected]",
    ...        
    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.

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

2 Answers