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
    }
5
user240993 25 Nov. 2012 im 16:30

3 Antworten

Beste Antwort

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});
6
Andrey Kuzmin 13 Juli 2015 im 21:18

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;
}
0
numbers1311407 25 Nov. 2012 im 16:00

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

1
AlexandruSerban 25 Nov. 2012 im 12:56