Javascript 主干：以增量获取模型

目前，我正在获取一个集合，有超过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
    }

---

从backbone.org网站的收集方法获取

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

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

Accounts.fetch(); 

您可以在url的查询字符串中设置限制，如/accounters？offset=0&limit=50

使用这些变量（偏移量、限制）限制数据库中的查询结果

---

获取请求的模型后修改查询字符串变量，这样当用户按下按钮或在页面上向下滚动时，下一批模型的请求将是/accounters？offset=50&limit=50

您必须在调用中指定{add:true}和分页参数。它将附加到集合，而不是重置其内容

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

然后只需聆听集合的

add

事件，并将项目附加到视图中

更新：在当前版本的主干网中，您需要调用：

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

---

我会在视图本身上这样做，而不是覆盖

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;
}

---

这难道不会加载所有的模型，然后用视图过滤它们吗？这仍然会有我想摆脱的延迟。在你第一次抓取时，你只会加载50或100，或者任何你想要的第一页。然后通过“更多”按钮一次加载一页，我有点不确定{page:3}会这样做。这是需要db处理的参数吗？我传递的obj的使用外观如何？

页面将与请求一起发送到服务器，您应该使用它在数据库查询中设置适当的偏移量<代码>页面

只是一个例子，您可以随意命名。它可能是

collection.fetch（{data:{offset:30，limit:30}，add:true}}}）

你喜欢什么都行。为什么在当前版本的主干中有2个开放的花括号

{

和3个封闭的花括号

}

？这实际上不起作用。您需要使用remove选项而不是add:

collection.fetch（{data:{page:3}，remove:false}）