Backbone.js - get view, model or collection property in ajax 'beforeSend'

Question

I am using Backbone.js in my node app. I am calling various ajax call from views, models and colllection. I have created my custom property e.g. "myName" in every view, model and collection and assigned with unique name for each. Now I want this "myName" property in ajax "beforeSend", So I should know from which view or model, this ajax is called. Is there any option to do this?

Do you have custom `$.ajax` calls or all interaction with the server done using `backbone.model` and `backbone.collection`'s? — vvahans, Dec 15 '14 at 08:12
@VahanVardanyan, I have made $.ajaxSetup(), and trashing all ajax call in "beforeSend". In this method, I want from which model or collection, this ajax is called? — Manish Sapkal, Dec 15 '14 at 09:03

vvahans · Answer 1 · 2014-12-15T13:08:23.080

beforeSend callback of $.ajax() receives 2 arguments:

beforeSend

Type: Function( jqXHR jqXHR, PlainObject settings )

As you can see 2nd argument is settings which receives all options passed to fetch method of 'Backbone.Collection' or Backbone.Model:

Example:

Your ajax setup:

$.ajaxSetup({
       beforeSend: function (xhr, options) {
           console.log(options.testVar); // Will be "Hello" when collection fetched
       }
});

Place when you doing fetch() or somehow interacting with server:

yourCustomCollectionOrModel.fetch({testVar: "Hello"}).done(function(){
    // bla bla        
})

So whenever yourCustomCollectionOrModel has fetched testVar will be passed to the beforeSend's options argument.

Note: Avoid globals if you can solve the issue in more preferred way.

You can go event better if you don't want to repeat the same any time you fetching collection or model.

Just rewrite the fetch() method, and add collection/model specific flag to the options.

Example

var TestCollection = Backbone.Collection.extend({
    url: 'your/api/path', 
    fetch: function (options) {
        options = options || {};
        options.testVar = 'Hello';
        return this.constructor.__super__.fetch.call(this, options);
    }
});

Update:

Another and maybe the shortest way to achieve the same behavior, is to wrap Backbone.sync like this:

  var oldSync = Backbone.sync;
  Backbone.sync = function(method, model, options) {
    options = options || {};
    options.modelContext = model;
    return oldSync.call(Backbone, method, model, options);
  }

In this way you don't need to rewrite fetch, or manually pass options to fetch() method.

And the in beforeSend callback of $.ajax:

$.ajaxSetup({
       beforeSend: function (xhr, options) {
           console.log(options.modelContext); // this will be the model's or collection's instance
       }
});

Hope this helps!

thanks @vahan-vardanyan, I am doing more or less same thing as you mentioned. As per your example, I have to set options in fetch, which is received in settings in "beforeSend". but Here I want "yourCustomCollectionOrModel" or atleast yourCustomCollectionOrModel.myName property without passing it in option. Is there any way? — Manish Sapkal, Dec 15 '14 at 11:17
You need to somehow access the scope of collection or model, so you need some reference to it. `beforeSend`'s arguments doesn't hold such kind of information. Actual $.ajax call done in the `Backbone.sync`, so you can rewrite it to pass collection/model to the $.ajax as option by default. But I guess it's not a good idea — vvahans, Dec 15 '14 at 11:31
thanks @vahan-vardanyan for yr reply, but sorry I couldn't understand what you explain due to my bed English. Can you please give any example for the same? — Manish Sapkal, Dec 15 '14 at 11:35
Look at the [definition](http://backbonejs.org/docs/backbone.html#section-141) of `Backbone.sync` . You somehow need to reference collection/model from `beforeSend`, and the best way is `options`. — vvahans, Dec 15 '14 at 11:46
@ManishSapkal I added update to the question. I assume this is the best way for you. — vvahans, Dec 15 '14 at 13:09

score 0 · Answer 2 · answered Dec 15 '14 at 10:14

// for example
$.ajaxSetup({
       beforeSend: function (xhr) {
           xhr.setRequestHeader('viewName', yourGlobalVariable /* or session storage */);
       }
});

before each ajax call (or model/collection fetch, save etc) store in yourGlobalVariable name of your view.

Backbone.js - get view, model or collection property in ajax 'beforeSend'

2 Answers2