Question

I have a User model(Backbone.js) and I want to update its settings attribute and then save it to the server. Settings is in JSON format, and the way I have it set up is that settings is the string version and settingsJSON is the object version. I bind functions to the change event of each so that when one changes, it updates the other.

The problem I am having, is that the save method is running before the changed handler is finished running. Is there any way i could ensure that all event handlers for that model are complete or something like that?

how I’m calling it:

currentUser.get('settingsJSON').apps = appsEnabled;
currentUser.save();

My event handlers:

Initialize: function() {
    var that = this;
    this.on("change:settingsJSON", function(model){
        model.set({settings: JSON.stringify(model.get('settingsJSON'))});
    });

    this.on("change:settings", function(model){
        model.set({settingsJSON: JSON.parse(model.get('settings'))});
    });
}

@fencliff:

The change event is firing when I run this and works properly, I had it print the new settings string to the console.

Are you sure that they are called synchronously? I added console.log('changed') to the end of the .on(change) and put console.log('saved') directly after currentUser.save() and every time the console read:

saved
changed

For now I have just made it so that I stringily the JSON and save it to settings directly before I save and that works fine.

Answer 1

Backbone events are executed synchronously. That means that unless you (or some library) has overridden some part of the event handling, the change handlers will have processed as soon as you execute the next line of code.

In you code example there is another problem. When you call

user.get('settingsJSON').apps = appsEnabled;

The change event will not fire, because the value of settingsJSON has not been changed, merely the contents of the object were modified. The model.attributes.settingsJSON is still the same object as before.

The events are fired only when you call set on the property, and the new value is a different object. For example:

user.set('settingsJSON', _.extend({}, user.get('settingsJSON'), {apps:appsEnabled});

Another problem, it would seem, is that your event handlers, if triggered, would cause the change event being fired twice for the property which was first set:

this.on("change:settingsJSON", function(model){
    //-> changes settings, and set triggers change
    model.set({settings: JSON.stringify(model.get('settingsJSON'))});
});

this.on("change:settings", function(model){
    //-> changes settingsJSON, and set triggers change
    model.set({settingsJSON: JSON.parse(model.get('settings'))});
});

To solve that issue, call set with {silent:true} or modify the model.attributes hash directly.

Edited with corrections by @muistooshort.

Edited again with further corrections