Derzeit hole ich eine Sammlung mit über 1000 Modellen mit einer anständigen Verzögerung. Wie kann ich 50 gleichzeitig abrufen? Ist es auch möglich, einen "Mehr" -Button zu drücken, um weitere 50 abzurufen, die derzeit nicht vorhanden sind?
Versuchen Sie zu vermeiden, die gesamte Sammlung auf einmal zu greifen, und verwenden Sie eher ein Schema vom Typ "Lazy Loading".
Hier ist meine aktuelle Rendermethode
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
}
3 Antworten
Sie müssen {add: true} und Ihre Paginierungsargumente im Aufruf collection.fetch angeben. Es wird an die Sammlung angehängt, anstatt den Inhalt zurückzusetzen.
collection.fetch({data: {page: 3}, add: true})
Hören Sie sich dann einfach das add - Ereignis der Sammlung an und hängen Sie das Element an Ihre Ansicht an.
UPDATE: In der aktuellen Version des Backbones müssen Sie Folgendes aufrufen:
collection.fetch({data: {page: 3}, remove: false});
Ich würde dies in der Ansicht selbst tun, anstatt sync oder fetch selbst zu überschreiben.
Etwas wie:
// 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;
}
Von der backbone.org-Website unter Sammelmethode abrufen.
Backbone.sync = function(method, model) {
alert(method + ": " + model.url);
};
var Accounts = new Backbone.Collection;
Accounts.url = '/accounts';
Accounts.fetch();
Sie können ein Limit in der Abfragezeichenfolge der URL like / accountants? Offset = 0 & limit = 50 festlegen.
Begrenzen Sie die Abfrageergebnisse aus Ihrer Datenbank mithilfe dieser Variablen (Offset, Limit).
Ändern Sie die Abfragezeichenfolgenvariablen nach dem Abrufen der angeforderten Modelle. Wenn der Benutzer eine Schaltfläche drückt oder auf Ihrer Seite nach unten scrollt, lautet die Anforderung für den nächsten Modellstapel / Buchhalter? Offset = 50 & limit = 50