Overide Backbone sync globally with Browserify

Question

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.

Answer 1

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;

Answer 2

1. I would ditch attributes on the servicesNew object and use the options object to pass the urls
2. 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/