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 view: I have a large dataset on the server, messages in this case, that I want to make accessible through a collection. Seeing as there could be thousands of messages I don't want to simply fetch and store all of them at once, so my collection would have to at least understand limits and offsets. Not to mention querying filtered or sorted lists.

Is a backbone collection even the way to handle this?

Cheers

score 31 · Accepted Answer · edited May 22 '12 at 10:04

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.

score 6 · Answer 2 · answered May 28 '11 at 13:37

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'

});

score 1 · Answer 3 · answered May 10 '11 at 13:53

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();

score 0 · Answer 4 · answered May 10 '11 at 13:53

0

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.

answered May 10 '11 at 13:53

Julien

9,216
4
37
38

backbone.js collection get vars

4 Answers4

Linked