Geek Answers Handbook

Highway: Selecting Models in Steps

Currently, I am collecting a collection with more than 1000 models with a decent delay. How can I get 50 at a time? Also, is it possible to press the “more” button to get another 50 that are currently missing?

Trying to avoid capturing the entire collection at once and have more "lazy loading" schemes.

Here is my current rendering method

render: function(){ var self = this var collection = this.collection collection.each(function(tenant){ var view = new TenantView({ model: tenant, collection: collection }) self.$el.append(view.render().el) }) return this }
+4
source share
3 answers

You must specify {add: true} and your pagination arguments in collection.fetch . It will be added to the collection, not rewrite its contents.

 collection.fetch({data: {page: 3}, add: true})

Then just listen to the add event collection and add the item to your view.

UPDATE: in the current trunk version you need to call:

 collection.fetch({data: {page: 3}, remove: false});
+6
source

On the backbone.org website, under Data collection method.

 Backbone.sync = function(method, model) { alert(method + ": " + model.url); }; var Accounts = new Backbone.Collection; Accounts.url = '/accounts'; Accounts.fetch();

Can you set a limit in the query string of a url like / accountants? offset = 0 & limit = 50.

Limit the query results from your database using these variables (offset, limit).

Change the query string variables after retrieving the requested models, so when the user clicks a button or scrolls the page, will there be a request for the next batch of models / accountants? offset = 50 & limit = 50

+1
source

I would do this on the view itself, instead of overwriting sync or fetch .

Sort of:

 // when extending your view initialize: function(options) { //... this.collection.on('add', this.renderTenant, this); }, events: { // change the selector to match your "more" button 'click button.more': 'uiMore' }, // Just tacking this on the view. You could make it an option, or whatever. perPage: 50, // this would produce a query with `offset` and `length`. Change it to // however your request should paginate: page/perPage, just page, etc. uiMore: function() { var $more = this.$('.more'); var data = {}; data.offset = this.collection.length; data.length = this.perPage; $more.prop('disabled', true); this.collection.fetch({data: data, add: true, success: function() { $more.prop('disabled', false); }); }, renderTenant: function(tenant) { var view = new TenantView({ model: tenant, collection: this.collection }) this.$el.append(view.render().el); }, render: function(){ this.collection.each(this.renderTenant.bind(this)); return this; }
0
source

More articles:


All Articles