When I try to update a model in Backbone via save the change event on the model is fired twice. Events are fired in this order.

1. change
2. request
3. change
4. sync

However, if I pass (wait: true), only the first change event is fired.

Can anybody explain why this is happening, and how I can get change to only fire once without passing (wait: true)?

Two change events:

    editItem: function() {
        this.model.save({
            name: "Howard the Duck"
        });
    }

One change event:

    editItem: function() {
        this.model.save({
            name: "Howard the Duck"
        }, (wait: true);
    }

Pseudo code:

App.Views.Item = Backbone.View.extend({
    initialize: function() {
        this.model.on("change", this.changing, this);
        this.model.on("request", this.requesting, this);
        this.model.on("sync", this.syncing, this);
    },

    events: {
        "click a": "editItem"
    },

    editItem: function() {
        this.model.save({
            name: "Howard the Duck"
        });
    }

    changing: function() {
        console.log("changing");
    },        

    requesting: function() {
        console.log("requesting");
    },

    syncing: function() {
        console.log("syncing");
    }
});

When I try to update a model in Backbone via save the change event on the model is fired twice. Events are fired in this order.

1. change
2. request
3. change
4. sync

However, if I pass (wait: true), only the first change event is fired.

Can anybody explain why this is happening, and how I can get change to only fire once without passing (wait: true)?

Two change events:

    editItem: function() {
        this.model.save({
            name: "Howard the Duck"
        });
    }

One change event:

    editItem: function() {
        this.model.save({
            name: "Howard the Duck"
        }, (wait: true);
    }

Pseudo code:

App.Views.Item = Backbone.View.extend({
    initialize: function() {
        this.model.on("change", this.changing, this);
        this.model.on("request", this.requesting, this);
        this.model.on("sync", this.syncing, this);
    },

    events: {
        "click a": "editItem"
    },

    editItem: function() {
        this.model.save({
            name: "Howard the Duck"
        });
    }

    changing: function() {
        console.log("changing");
    },        

    requesting: function() {
        console.log("requesting");
    },

    syncing: function() {
        console.log("syncing");
    }
});

• javascript
• backbone.js

1 Answer 1

Here is a deposition of what happens when you save a model while changing attributes:

1. model.set with the data passed as argument
   triggers a change event when options.wait is falsy
2. XHR request
3. model.set with the data returned from the server
   triggers a change event when options.wait is truthy or the data returned by the server is not what the model knows

Your server probably returns a modified property which triggers the second change event. Either modify your response or restrict your event listening with

this.model.on("change:name", this.changing, this);

Compare these Fiddles

• http://jsfiddle/nikoshr/ZWFWx/
  the response is what the client sent
  you should see change - request - sync

• http://jsfiddle/nikoshr/QT3YJ/
  a version emulating your problem where the server adds a value not present in the model
  change - request - change - sync