Saving parent_id relationship with ember data

Question

Okay. I've had a real good look through SO and other sources returned by Google, but am yet to find an answer to my problem.

I have two models:

App.Kid = Ember.Model.extend
    title: DS.attr "string"
    parent: DS.belongsTo "App.Parent"

App.Parent = Ember.Model.extend
    title: DS.attr "string"
    kids: DS.hasMany "App.Kid"

Most questions on here discuss retrieving ember data relationships from sideloaded JSON data, which I'm capable of doing. What I need to know is how do I save the parent_id when creating a new kid?

At the moment I'm saving a new kid in the App.KidController like so:

App.ParentController = Ember.ObjectController.extend
    needs: [ "widgets" ]

App.KidCreateController = Ember.ObjectController.extend
    needs: [ "dashboard" ]

    saveChild: ->
        @content.get( "store" ).commit()

And when saving there is no parent_id to be seen, however I do get a new parent object (assigned to a parent key) with the id of 0.

Can anybody explain what I'm doing wrong here?

Update 1

So using my actual situation I'll explain what I'm doing.

A user has several dashboards which have multiple widgets attached to it. My model structure looks like this:

App.Dashboard = DS.Model.extend
    title: DS.attr "string"
    widgets: DS.hasMany "App.Widget"

App.Widget = DS.Model.extend
    title: DS.attr "string"
    type:  DS.attr "string"
    ...
    dashboard: DS.belongsTo "App.Dashboard"

intuitivepixel intuitivepixel · Accepted Answer · 2013-08-26T10:04:07

One note at first, you have labelled your question with ember-data but your are defining you models using Ember.Model.extend which is used when using ember-model as your persistence library, therefore you should change it to DS.Model.extend or label your question differently, I'm assuming ember-data in my answer.

If your App.Kid model belongs to a App.Parent which has a kids array than your should use a ParentController to save the new Childs belonging to that parent this way you will have access to the parent id and it's kids array which you need to push the new Childs into.

Example:

Given a simple template like this:

{{#each parent in model itemController="parent"}}
   <strong>(id: {{parent.id}}) {{parent.title}}</strong>
   <div class="well">
     <strong>Kids</strong>
     <ul>
     {{#each kid in parent.kids}}
       <li>(id: {{kid.id}}) {{kid.title}}</li>
     {{/each}}
     </ul>
     Kid name: {{input valueBinding="newKidName"}} <button class="btn btn-info" {{action saveChild newKidName}}>Add kid</button>
   </div>
{{/each}}

You should then define a ParentController for each parent item and create there a saveChild function:

App.ParentController = Ember.ObjectController.extend({
  needs: ['dashboard'],
  saveChild: function(newKidName) {
   // get the dashboard id you want with
   // this.get('controllers.dashboard').get('id');
   // this assumes you have one dashboard?

   // create the new child
    var newKid = App.Kid.createRecord({title: newKidName});
    // push the newly created child into the parent's kids array
    this.get('content').get('kids').pushObject(newKid);
    // commit changes to the parent
    this.get('content').get('store').commit();
  }
});

See here for a simple demo of the example: http://jsbin.com/odosoy/115/edit

Hope it helps.

Saving parent_id relationship with ember data

2 Answers

Example: