From many to many relationships with Ember, ember-data and Rails

Question

I had a problem trying to save many, many relationships in Ember.js using ember-data and rails data. The association works fine on the ember side, but when I try to complete a transaction, it will not include a list of new associations when sent to the rails. Any help would be greatly appreciated, I pulled out my hair trying to find an example application that makes something so simple on github, but I cannot find it.

Here is my version of my Ember code:

App.Store = DS.Store.extend revision: 11 adapter: DS.RESTAdapter.create url: '/api' App.Router.map -> @resource 'rosters' @resource 'users' App.User = DS.Model.extend rosters: DS.hasMany 'App.Roster' App.Roster = DS.Model.extend users: DS.hasMany 'App.User' App.RostersEditRoute = Ember.Route.extend setupController: (controller, model) -> controller.set 'users_list', App.User.find() App.RostersEditView = Ember.View.extend userCheckbox: Em.Checkbox.extend checkedObserver: ( -> users = @get 'roster.users' if @get 'checked' users.addObject @get 'user' else users.removeObject @get 'user' @get('controller.store').commit() ).observes 'checked' 

Change form:

 each user in users_list label.checkbox view view.userCheckbox rosterBinding="current_roster" userBinding="user" | #{user.full_name} 

Rails Backend (Using Inherited Resources and Serializer Self-Service):

 class User < ActiveRecord::Base has_many :rosters_users has_many :rosters, through: :rosters_users accepts_nested_attributes_for :rosters end class RostersUser < ActiveRecord::Base belongs_to :user belongs_to :roster end class Roster < ActiveRecord::Base has_many :rosters_users has_many :users, through: :rosters_users accepts_nested_attributes_for :users end module Api class RostersController < BaseController end end module Api class UsersController < BaseController end end module Api class BaseController < ActionController::Base inherit_resources respond_to :json before_filter :default_json protected # Force JSON def default_json request.format = :json if params[:format].nil? end end end class UserSerializer < BaseSerializer has_many :rosters, embed: :ids end class RosterSerializer < BaseSerializer has_many :users, embed: :ids end 

So, as I said, the association works fine on Ember, but the rails don't seem to get new association data. When I check the XHR tab in the web inspector, I see that he sent this message:

Payload request {"roster": {"created_at": "Thu, Mar 21, 2013 11:16:02 PM GMT", "team_id": "1"}}

And I come back with a content error 204 because nothing has changed.

Answer 1

Although it is possible to configure hasMany , Ember Data does not yet support many many relationships (see this issue ). Now you can expand the relationship using the membership model.

 App.User = DS.Model.extend rosterMemberships: DS.hasMany 'App.RosterMembership' App.RosterMembership = DS.Model.extend user: DS.belongsTo 'App.User' roster: DS.belongsTo 'App.Roster' App.Roster = DS.Model.extend rosterMemberships: DS.hasMany 'App.RosterMembership' 

Now you can use createRecord() and deleteRecord() with the membership model to add and remove relationships.

Unfortunately, in this example, it is not so easy to associate it with a collection of lists for a specific user. One of the following:

 App.User = DS.Model.extend rosterMemberships: DS.hasMany 'App.RosterMembership' rosters: ( -> @get('rosterMemberships').getEach('user') ).property ' [e-mail] ' App.RosterMembership = DS.Model.extend user: DS.belongsTo 'App.User' roster: DS.belongsTo 'App.Roster' relationshipsLoaded: ( -> @get('user.isLoaded') and @get('roster.isLoaded') ).property 'user.isLoaded', 'roster.isLoaded' 

If you are attached to user.rosters , your template should be updated when creating or destroying links.

Answer 2

Alternative solution:

 App.Roster = DS.Model.extend users_map: DS.attr('array') users: DS.hasMany 'App.User' users_change: (-> @set('users_map', @get('users').map((el) -> el.id).toArray()) ).observes(' users.@each ') 

an array of user identifiers will be sent to the server in POST data