backbone.js collection get vars

Question

This seems like an obvious one, but I\'m somehow missing it...

How do you send options along with a backbone.js collection fetch()?

Or, from a broader point of

Answer 1

You can add an id to the url that can be used by the server to make a selection of the data send. E.g.

    var EventsCollection = Backbone.Collection.extend({

        model: Events,

    });

    var eventCollection = new EventsCollection();
    eventsCollection.url = 'foo?offset=10&limit=20';
    eventsCollection.fetch();

Answer 2

I've been messing with Backbone for a couple days now and I had to deal with this problem almost immediately and I looked at this solution, but I found it clunky. After reading some more backbone documentation I discovered you can actually override any of the jQuery.ajax options within the fetch() method. So for example

Posts = Backbone.Collections.extend({
  model: Post,
  url: '/posts'
});

Now when you want to call fetch just send it whatever parameters you wish. e.g.

var posts = new Posts();
posts.fetch({ data: { page: 3, pagesize: 10, sort: 'asc' } });

This will produce the following request:

http://yourdomain/posts?page=3&pagesize=10&sort=asc

Anyway, I know you've already accepted an answer, but hopefully this will help someone.

Answer 3

Consider this code, where when you instantiate your collection, you pass in preferences for its offset, limit, or sorting. The initialize takes defaults if preferences are not provided. And then the url function appends these into the call to the server. Thereafter, you would have to potentially update these values (probably just the offset), when processing responses from the server.

MessageList = Backbone.Collection.extend({

    initialize: function(models, options) {
        options || (options = {});
        this.offset = options.offset || 0;
        this.limit  = options.limit || MessageList.DEFAULT_LIMIT;
        this.sortBy = options.sortBy || MessageList.DEFAULT_SORTBY; 
    },

    url: function() {
        return '/messages?' + 
               'offset=' + encodeURIComponent(this.offset) + '&' +
               'limit=' + encodeURIComponent(this.limit) + '&' + 
               'sort_by=' + encodeURIComponent(this.sortBy);
    },

    parse: function(response) {
       // Parse models
       // Parse offset, limit, sort by, etc
    }

}, {

    DEFAULT_LIMIT: 100,
    DEFAULT_SORTBY: 'name_asc'

});

Answer 4

Override the "url" function of your collection and add the parameters (?param=xyz).

The options parameter of fetch can also be used as it is the one passed along to the final jQuery ajax call. So if you add a "data" param there it will be used.