The backpusher from pusher

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

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.

The socket_id is undefined if Backpusher is instantiated after connecting to Pusher

My app has two different kinds of backbone collections that are connected to pusher (People and Documents). They each use their own pusher channels, so I placed the code that creates the channel for the collection in the collection's initializer.

class Warp.Collections.Documents extends Backbone.Collection
  initialize: ->
    console.log "Initializing Warp.Collections.Documents"

    channel = Warp.pusher.subscribe("documents-#{Warp.Config.meeting_token}")
    backpusher = new Backpusher(channel, this)
 # other code...

Warp.pusher (the pusher instance) is created in the function that starts the Backbone app

window.Warp =
  Models: {}
  Collections: {}
  Views: {}
  Routers: {}
  Config: {}
  init: (options = {}) -> 
    console.log "Initializing app. "
    _.extend(@Config, options);

    @pusher = new Pusher(@Config.pusher_key)

    new Warp.Routers.Main()
    unless Backbone.history.started
      Backbone.history.start()
      Backbone.history.started = true

The problem is that the Pusher connection is already established when backpusher is instantiated. Backpusher binds to the Pusher connections "connected" event to set the socket_id, but that event never fires. Consequently, the socket_id remains undefined.

Am I using Backpusher the wrong way or would it make sense to add some code that checks if the pusher connection is already established and fetch the socket id right away? (see pull request -- coming up soon)

pusher / backpusher Goto Github PK

backpusher's People

Contributors

Stargazers

Watchers

Forkers

backpusher's Issues

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

The socket_id is undefined if Backpusher is instantiated after connecting to Pusher

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent