Backbone.js fetch with parameters

154
votes

Following the documentation, I did:

var collection = new Backbone.Collection.extend({
        model: ItemModel,
        url: '/Items'
})

collection.fetch({ data: { page: 1} });

the url turned out to be: http://localhost:1273/Items?[object%20Object]

I was expecting something like http://localhost:1273/Items?page=1

So how do I pass params in the fetch method?

4
javascriptbackbone.js
That's definitely weird. What you have looks like it should work just fine, based on the API docs. Are you using the latest version of Backbone.js? - Matt Ball
Can you try JSON.stringify({ data: { page: 1} })? - Joe
@Joe Tuskan, I'm not sure what to do with that, but I did: collection.fetch(JSON.stringify({ data: { page: 1} })); and nothing was passed in the url. - Shawn Mclean
Ok, do this: collection.fetch({ data:JSON.stringify({ page: 1}) }); - Joe
This works fine as you wrote it in Backbone 1.0 fyi - Dominic

4 Answers

214
votes

changing: 

collection.fetch({ data: { page: 1} });

to: 

collection.fetch({ data: $.param({ page: 1}) });

So with out over doing it, this is called with your {data: {page:1}} object as options

Backbone.sync = function(method, model, options) {
    var type = methodMap[method];

    // Default JSON-request options.
    var params = _.extend({
      type:         type,
      dataType:     'json',
      processData:  false
    }, options);

    // Ensure that we have a URL.
    if (!params.url) {
      params.url = getUrl(model) || urlError();
    }

    // Ensure that we have the appropriate request data.
    if (!params.data && model && (method == 'create' || method == 'update')) {
      params.contentType = 'application/json';
      params.data = JSON.stringify(model.toJSON());
    }

    // For older servers, emulate JSON by encoding the request into an HTML-form.
    if (Backbone.emulateJSON) {
      params.contentType = 'application/x-www-form-urlencoded';
      params.processData = true;
      params.data        = params.data ? {model : params.data} : {};
    }

    // For older servers, emulate HTTP by mimicking the HTTP method with `_method`
    // And an `X-HTTP-Method-Override` header.
    if (Backbone.emulateHTTP) {
      if (type === 'PUT' || type === 'DELETE') {
        if (Backbone.emulateJSON) params.data._method = type;
        params.type = 'POST';
        params.beforeSend = function(xhr) {
          xhr.setRequestHeader('X-HTTP-Method-Override', type);
        };
      }
    }

    // Make the request.
    return $.ajax(params);
};

So it sends the 'data' to jQuery.ajax which will do its best to append whatever params.data is to the URL.

71
votes

You can also set processData to true:

collection.fetch({ 
    data: { page: 1 },
    processData: true
});

Jquery will auto process data object into param string,

but in Backbone.sync function, Backbone turn the processData off because Backbone will use other method to process data in POST,UPDATE...

in Backbone source:

if (params.type !== 'GET' && !Backbone.emulateJSON) {
    params.processData = false;
}
1
votes

Another example if you are using Titanium Alloy: 

 collection.fetch({ 
     data: {
             where : JSON.stringify({
                page: 1
             })
           } 
      });
-3
votes
try {
    // THIS for POST+JSON
    options.contentType = 'application/json';
    options.type = 'POST';
    options.data = JSON.stringify(options.data);

    // OR THIS for GET+URL-encoded
    //options.data = $.param(_.clone(options.data));

    console.log('.fetch options = ', options);
    collection.fetch(options);
} catch (excp) {
    alert(excp);
}