ember.js update view after PUT using node.js/express - node.js

Question

I'm pretty new to ember. I have a basic ember app in place with a CRUD page. I'm having trouble refreshing the view/template of the CRUD page after making a PUT request to a node API using mongoDB.
When I delete a model, the page refreshes fine, but not when I PUT. If I refresh the page, everything is fine and working, but I want the view to refresh as soon as I click the "approve" button I have.
Can someone point me in the right direction of how I should be dealing with this in Ember? Or am I not returning something properly from my API and Ember is doing what it should?
Thanks
Node API PUT:
router.put( '/:id', function( req, res ) {
return Picture.findById( req.params.id, function( err, picture ) {
picture.status = req.body.picture.status;
picture.url = req.body.picture.url;
//...and so on
return picture.save( function( err ) {
if( !err ) { return res.send( picture ); }
return res.send('ERROR');
});
});
});
Model:
App.Picture = DS.Model.extend
authorName: DS.attr('string')
pictureName: DS.attr('string')
url: DS.attr('string')
tags: DS.attr('string')
status: DS.attr('string')
Route:
App.AdminRoute = Ember.Route.extend
model: ->
return #store.find 'picture'
actions:
delete: (picture) ->
picture.destroyRecord() # view updates fine
approve: (picture) ->
picture.set('status', 'verified')
picture.save()
Note - I'm also getting this error in my console that I have no understanding of - I don't remember always getting it though, so I'm not sure how much it's related.
Error: No model was found for 'v'
at new Error (native)
at Error.r (http://localhost:3000/javascripts/libs/ember-1.7.0.js:4:992)
at Ember.Object.extend.modelFor (http://localhost:3000/javascripts/libs/ember-data.js:3:4754)
at t.default.i.extend.extractSingle (http://localhost:3000/javascripts/libs/ember-data.js:1:23642)
at y (http://localhost:3000/javascripts/libs/ember-1.7.0.js:4:30411)
at r [as extractSingle] (http://localhost:3000/javascripts/libs/ember-1.7.0.js:4:28863)
at e.default.Ember.Object.extend.extractSave (http://localhost:3000/javascripts/libs/ember-data.js:1:22390)
at e.default.Ember.Object.extend.extractUpdateRecord (http://localhost:3000/javascripts/libs/ember-data.js:1:22097)
at e.default.Ember.Object.extend.extract (http://localhost:3000/javascripts/libs/ember-data.js:1:21661)
at http://localhost:3000/javascripts/libs/ember-data.js:3:9807

Answer 1

The JSON payload being returned from the server is not in a format suitable for Ember to determine the model type. Ember is expecting something like this:
{
picture: {
"_id":"5428abf33e733af2fc0007ff","authorName":"Ben","pictureName":"Proud Chicken",
"status":"verified","tags":null,"url":"benrlodge.github.io/isotopeSearchFilter/img/four.jpg"
}
}
Since you say it works when you refresh, try comparing this payload with what is returned from the GET. The PUT response should be similar.
Refer to this Ember guide: http://emberjs.com/guides/models/connecting-to-an-http-server/#toc_json-conventions
To tweak the payload and (for example) remove the offending property, you can do this:
App.PictureSerializer = DS.RESTSerializer.extend({
normalizePayload: function(payload) {
if (payload['__v']) {
delete payload['__v'];
}
return this._super(payload);
}
});
This example is for PictureSerializer, but if you made it ApplicationSerializer it would work for any type. See the API here: http://emberjs.com/api/data/classes/DS.RESTSerializer.html#method_normalize