5

現在、まともな遅延がある1000を超えるモデルを持つコレクションをフェッチしています。一度に50をフェッチするにはどうすればよいですか？また、「もっと見る」ボタンを押して、現在そこにない別の50をフェッチすることは可能ですか？

コレクション全体を一度に取得することを避け、「遅延読み込み」タイプのスキームを増やすことを試みます。

これが私の現在のレンダリング方法です

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

3 に答える 3

7

collection.fetch呼び出しで、{add：true}とページネーション引数を指定する必要があります。内容をリセットする代わりに、コレクションに追加します。

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

次に、コレクションのaddイベントを聞いて、ビューにアイテムを追加します。

更新：バックボーンの現在のバージョンでは、呼び出す必要があります：

collection.fetch({data: {page: 3}, remove: false});
于 2012-11-25T15:15:28.523 に答える
1

収集メソッドフェッチの下のbackbone.orgウェブサイトから。

Backbone.sync = function(method, model) {
  alert(method + ": " + model.url);
};

var Accounts = new Backbone.Collection;
Accounts.url = '/accounts';

Accounts.fetch();

/ accountants？offset = 0＆limit=50のようにURLのクエリ文字列に制限を設定できます。

これらの変数（オフセット、制限）を使用して、データベースからのクエリ結果を制限します。

要求されたモデルをフェッチした後、クエリ文字列変数を変更して、ユーザーがボタンを押すかページを下にスクロールしたときに、モデルの次のバッチの要求が/ accountants？offset = 50＆limit=50になるようにします。

于 2012-11-25T12:56:49.857 に答える
0

syncこれは、上書きしたり、ビュー自体ではなく、ビュー自体で行いますfetch。

何かのようなもの：

// 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;
}
于 2012-11-25T16:00:20.627 に答える