Overide Backbone sync globally with Browserify

问题

var servicesNew = {
    readUrl :"",
    deleteUrl :"",
    updateUrl :"",
    createUrl :"",

    primaBackbone : function(method, model, options) {
        options || (options = {});

        var beforeSend = options.beforeSend;
        options.beforeSend = function(xhr) {

          xhr.setRequestHeader('Authorization','Bearer 52b20db1-4bcb-426e-9bbf-a53a826249f3')
          if (beforeSend) return beforeSend.apply(this, arguments);
        };
        // passing options.url will override 
        // the default construction of the url in Backbone.sync

        switch (method) {
            case "read":
                options.url = readUrl;
                break;
            case "delete":
                options.url = deleteUrl+'/'+model.get("id");
                break;
            case "update":
                options.url = updateUrl+'/'+model.get("id");
                break;
             case "create":
                options.type = "PUT";
                options.url = createUrl;
                break;    
        }

        if (options.url)
            return Backbone.sync.call(model, method, model, options);
    }    
}

module.exports = servicesNew;

My Model:

    // Filename: models/project
var Backbone = require('backbone'),
    Urls= require('../../libs/urls'),
    servicesNew = require('../../libs/servicesnew');

var NotificationHeaderModel = Backbone.Model.extend({

      sync: function(){

        servicesNew.readUrl = Urls.notifications.unread;
        servicesNew.createUrl = Urls.notifications.list;
        servicesNew.deleteUrl = Urls.notifications.list;
        servicesNew.updateUrl = Urls.notifications.list;



        return Backbone.sync = servicesNew.primaBackbone();

      }


});
// Return the model for the module
module.exports = NotificationHeaderModel;

IN View:

    this.model.fetch({
   success: function(model, response, options){

    console.log(response);
     _this.template = notificationTemplate;

     _this.$el.html(_this.template({notificationData: response,notificationType:notifyMsg.notificationType()
      ,notificationMessage:notifyMsg.notificationMessage()}));
   },
   error: function(model, xhr, options){


    alert(xhr.result.Errors);
  }
});

I am trying to override the Backbone.sync method Backbone globally however i am unable to do so.

回答1:

I would ditch attributes on the servicesNew object and use the options object to pass the urls
your models' sync methods won't work like that, you're reassigning Backbone.sync and you don't pass any argument.

A potential solution could be

var servicesNew = {
    primaBackbone : function(method, model, options) {
        options || (options = {});

        var beforeSend = options.beforeSend;
        options.beforeSend = function(xhr) {
            xhr.setRequestHeader('Authorization','Bearer 52b20db1-4bcb-426e-9bbf-a53a826249f3')
            if (beforeSend) return beforeSend.apply(this, arguments);
        };

        switch (method) {
            case "read":
                options.url = options.readUrl;
                break;
            case "delete":
                options.url = options.deleteUrl+'/'+model.get("id");
                break;
            case "update":
                options.url = options.updateUrl+'/'+model.get("id");
                break;
             case "create":
                options.type = "PUT";
                options.url = options.createUrl;
                break;    
        }

        if (options.url)
            return Backbone.sync.call(model, method, model, options);
    }
}

And the model definition

var NotificationHeaderModel = Backbone.Model.extend({

      sync: function(method, model, options){
          options = _.defaults({}, options, {
              readUrl: Urls.notifications.unread,
              createUrl: Urls.notifications.list,
              deleteUrl: Urls.notifications.list,
              updateUrl: Urls.notifications.list
          });

          return servicesNew.primaBackbone.call(model, method, model, options);
      }

});

And a demo http://jsfiddle.net/mn0eo6eb/

回答2:

What do you mean by "globally" the above code only replaces the sync method for that particular Backbone Model (NotificationHeaderModel). If you want to replace the actual sync behind everything, it should be Backbone.sync (http://backbonejs.org/#Sync)

    servicesNew.readUrl = Urls.notifications.unread;
    servicesNew.createUrl = Urls.notifications.list;
    servicesNew.deleteUrl = Urls.notifications.list;
    servicesNew.updateUrl = Urls.notifications.list;

    Backbone.sync = servicesNew.primaBackbone.bind(servicesNew);

Update: another thing is that you should assign the method primaBackbone to Backbone.sync instead of the returned value. Also, it is important that you should handle both case model and collection in your custom sync (if you don't need collections, then it is ok)

Update: Because you are using incorrect variables in the method. Calling readUrl alone refers to the global scope which is obviously undefined

Full code

var servicesNew = {
  readUrl :"",
  deleteUrl :"",
  updateUrl :"",
  createUrl :"",

  primaBackbone : function(method, model, options) {
    options || (options = {});

    var beforeSend = options.beforeSend;
    options.beforeSend = function(xhr) {

      xhr.setRequestHeader('Authorization','Bearer 52b20db1-4bcb-426e-9bbf-a53a826249f3')
      if (beforeSend) return beforeSend.apply(this, arguments);
    };
    // passing options.url will override 
    // the default construction of the url in Backbone.sync

    switch (method) {
        case "read":
            options.url = this.readUrl;
            break;
        case "delete":
            options.url = this.deleteUrl+'/'+model.get("id");
            break;
        case "update":
            options.url = this.updateUrl+'/'+model.get("id");
            break;
         case "create":
            options.type = "PUT";
            options.url = this.createUrl;
            break;    
    }

    return Backbone.sync.call(model, method, model, options);
  }    
}

 module.exports = servicesNew;

来源：https://stackoverflow.com/questions/30230661/overide-backbone-sync-globally-with-browserify

标签

javascript

backbone.js