Reputation: 5789
I have a basic backbone collection of models.
The view I'm working within displays information about the model, allowing edits.
In the render of my view I capture the model based on a passed in 'id'.
render: function() {
this.model = myCollection.get(this.options.passedInId);
// do the render...
}
I then have a click event which updates the model and calls the render to re-render with the updates
updateModel: function() {
var me = this;
this.model.set('someFlag', true);
this.model.save(this.model.toJSON(), {
success: function(model, resp) {
me.render();
}
}
My problem is when it comes back through the render the second time the get from the collection returns a different instance of the model (I can see a different cId on it) which does not contain my changed "someFlag" property. Therefore my edits don't show up when the view is re-rendered. I know there might be a more effecient way of handling this but my question is why does this occur? Shouldn't the model fetched from the collection include the edits I made on that model?
Only other thing is the "myCollection" in this example may have been reset between the initial get and the next get after the edit, but the id is still present and it finds a model just one without any of the updates.
Upvotes: 2
Views: 1755
Reputation: 5789
My issue was the collection was being reset between the render method and the updateModel method.
This causes the model to get out of sync with the collection to correct the problem all I needed to do was bind on the reset and make sure my model gets updated with the "new" version. I added this to my render.
var me = this;
this.collection.on('reset', function () {
me.model = this.get(me.model.id);
};
Upvotes: 1