Backbone: Two Change Events on Model Save

3
votes

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");
    }
});
1
javascriptbackbone.js

1 Answers

7
votes

Here is a decomposition 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