Overriding Backbone.sync causes success/error callbacks to not fire

[codezomb]

I noticed today that when including backpusher.js, which override Backbone.sync, that my success/error callbacks don't fire on save(). Another issue, is that when save() is called, the model isn't synced with the data in the database.

Consider the following:

$ ->
  class App.Views.ProjectModal extends Backbone.View
    id        : '#project_modal'
    className : 'modal'
    template  : JST['templates/modals/project']

    events:
      "submit form"     : "submit"
      "click  a.cancel" : "cancel"

    initialize: ->
      _.bindAll(@, 'render', 'submit', 'cancel')
      @render()

    render: ->
      $('body').append(
        $(@el).html(
          @template({
            model : @model
          })
        )
      )

      $.blockUI({ 
        message : $(@el)
      })

    submit: (e) ->
      e.preventDefault()
      @model.save(
        { name : $(e.currentTarget).find('[name=name]').val() }
        {
          success: (model, response) ->
            console.log "Success!"
          error: (model, response) ->
            console.log "Error!"
        }
      )

      $.unblockUI({
        onUnblock: =>
          @remove()
      })

    cancel: (e) ->
      e.preventDefault()
      $.unblockUI({
        onUnblock: =>
          @remove()
      })

Compiled from coffeescript:

var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) {
  for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; }
  function ctor() { this.constructor = child; }
  ctor.prototype = parent.prototype;
  child.prototype = new ctor;
  child.__super__ = parent.prototype;
  return child;
}, __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
$(function() {
  return App.Views.ProjectModal = (function() {
    __extends(ProjectModal, Backbone.View);
    function ProjectModal() {
      ProjectModal.__super__.constructor.apply(this, arguments);
    }
    ProjectModal.prototype.id = '#project_modal';
    ProjectModal.prototype.className = 'modal';
    ProjectModal.prototype.template = JST['templates/modals/project'];
    ProjectModal.prototype.events = {
      "submit form": "submit",
      "click  a.cancel": "cancel"
    };
    ProjectModal.prototype.initialize = function() {
      _.bindAll(this, 'render', 'submit', 'cancel');
      return this.render();
    };
    ProjectModal.prototype.render = function() {
      $('body').append($(this.el).html(this.template({
        model: this.model
      })));
      return $.blockUI({
        message: $(this.el)
      });
    };
    ProjectModal.prototype.submit = function(e) {
      e.preventDefault();
      this.model.save({
        name: $(e.currentTarget).find('[name=name]').val()
      }, {
        success: function(model, response) {
          return console.log("Success!");
        },
        error: function(model, response) {
          return console.log("Error!");
        }
      });
      return $.unblockUI({
        onUnblock: __bind(function() {
          return this.remove();
        }, this)
      });
    };
    ProjectModal.prototype.cancel = function(e) {
      e.preventDefault();
      return $.unblockUI({
        onUnblock: __bind(function() {
          return this.remove();
        }, this)
      });
    };
    return ProjectModal;
  })();
});

Without backpusher, the model is synced, and the success callback fires. With backpusher, this doesn't happen. The server side, utilizes the socket_id param to make sure not to re-push the event to the submitting client, but I don't think this is the issue.

[codezomb]

See issue #2 for pull requests to fix this, and an issue with socket_id.