Saving nested models

Question

I have two models like this:

App.Build = DS.Model.extend({
    allegiance: DS.attr('string'),
    profession: DS.attr('string'),
        skills: DS.hasMany('skill')
});

App.Skill = DS.Model.extend({
    name:DS.attr('string'),
    value:DS.attr('number')
});

In my app, I have controls to set the allegiance, profession, and values of each skill (there's up to 55).

Then in the actions hash of my application controller, I have an action to save the build model to the server.

save:function(){
     var store = this.get('store');
     var skills = this.get('controllers.skills').get('model');
     console.log(skills);
     var build = store.createRecord('build',{
          profession:1,
          allegiance:1,
          skills:skills
      });

      build.set('skills',skills);
      build.save();

      console.log('Saved!');
}

But when the build model is sent to the server the skills property is an empty array:

{"build":{"allegiance":"1","profession":"1","skills":[]}}

I'm sure I'm doing something wrong, but I can't figure out what and can't find any good documentation about it. An additional note, all I care about submitting is the skill id and value.

Any help will be greatly appreciated!

UPDATE:

Following Daniel's suggestion, I've edited the save function to use pushObjects to put the skills into the Build model, then save it. It's working better now. The generated post data is like this now:

{"build":{
    "allegiance":1,
     "profession":1,
          "skills":["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55"]}}

That being a list of the skill ids. None of the other attributes are submitted in the post. I've tried iterating over skills, creating a new object, and just pushing in the id and value, which are the only parts I need, but that gives me an error. Something like, can not use undefined, must be type skill.

This seems like something Ember data should handle natively. Is there something I'm missing to get it to send the other skill attributes in the request?

Thanks!!

Answer 1

If anyone else is interested, I solved the issue by overriding the serlizer with a custom serliazer for the Build model like this:

App.BuildSerializer = DS.RESTSerializer.extend({
     serializeHasMany: function(record, json, relationship) {
         if(relationship.key === 'skills') {
            var skills = record.get('skills');
            var block = [];

            skills.forEach(function(skill, index) {
                var current = {};
                current.id = skill.get('id');
                current.value = skill.get('value')
                block[index] = current;
            });

            json['skills'] = block;

         } else {
             return this._super(record,json,relationship);
         }
     }
});

UPDATE:

There's a much easier way to do this now using the DS.EmbeddedRecordsMixin like this:

App.BuildSerializer = DS.RESTSerializer.extend(DS.EmbeddedRecordsMixin,{
    attrs: {
        skills: 'records'
    }
});

Answer 2

Is the skills model a RecordArray? That's the underlying model Ember data uses. You might try creating the record then using pushObjects after the fact.

  var build = store.createRecord('build',{
      profession:1,
      allegiance:1
  });

  build.get('skills').pushObjects(skills);

additionally, save returns a promise, so in order to properly handle the successful save versus failure you can handle it like this.

 build.save().then(
    function(){
     console.log('Saved!');
    },
    function(){
     console.log('Failed to save');
    });