How to save changes on associated models in Ember Data

2
votes

I'm running Ember Data 1.0.0 with Ember 1.3.0.

I have this data:

{
  "product": {
    "id": 185588,
    "name": "USB MIDI Adapter",
    "images":["imageid1", "imageid2"....]
  },
  "images": [
    {
      "id": "imageid1",
      "url": "google.com"
    },
    {
      "id": "imageid2",
      "url": "google.com2"
    }
  ]
}

And these models:

App.Image = DS.Model.extend({
    url: DS.attr('string')
});

App.Product = DS.Model.extend({
    name: DS.attr('string'),
    images: DS.hasMany('Image') 
});

In my template I have an edit form to change the url on the associated images:

  <form {{action save on="submit"}}>
   {{input type="text" value=name}}

    {{#each images}}
    * {{input type="text" value=url}}<br>
    {{/each}}

   <button type="submit">Save</button>
   </form>

The save action is:

save: function() {
  var product = this.modelFor('productEdit');
  product.save();
  this.transitionTo('product', product);
}

The problem is that the save action only saves the product (PUT product), but not the changed that's made to the image urls. The model binding works fine, when I change the url on images the gui is updated as it should, but the PUT is not sent as it should.

How do I save the image changes?

1
ember.jsember-data

1 Answers

2
votes

You either need to call save on each record, call save on the recordarray(which will iterate and save), or you can override the serializer (serializeIntoHash) to inject the images into the save of the product.

records.forEach(function(record){
   if(record.get('isDirty')) record.save();
});