A model that "knows" if it has unsaved changes

ChangeTrackableModel.js

// This model (and any other model extending it) will be able to tell if it is synced with the server or not
var ChangeTrackableModel = Backbone.Model.extend({
  
  hasChangedSinceLastSync: false,
  
  initialize: function() {
    // If you extend this model, make sure to call this initialize method
    // or add the following line to the extended model as well
    this.listenTo(this, 'change', this.modelChanged);
  },
  
  modelChanged: function() {
    this.hasChangedSinceLastSync = true;
  },
  
  sync: function(method, model, options) {
    options = options || {};
    var success = options.success;
    options.success = function(resp) {
      success && success(resp);
      model.hasChangedSinceLastSync = false;
    };
    return Backbone.sync(method, model, options);
  }
  
});

Thanks for this! Why override sync method instead of listening to "sync" event in initializer? Wouldn't this be shorter:

var ChangeTrackableModel = Backbone.Model.extend({

  hasChangedSinceLastSync: false,

  initialize: function() {
    this.listenTo(this, 'change', this.modelChanged);
    this.listenTo(this, 'sync', this.modelSynced);
  },

  modelChanged: function() {
    this.hasChangedSinceLastSync = true;
  },

  modelSynced: function() {
    this.hasChangedSinceLastSync = false;
  }
});

these pointers are much appreciated. @priithaamer's suggestion is quite useful– succinct and legible, a rare combo!