Question

目前我正在推出一个拥有超过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
    }

Answer 1

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

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

然后，只需收听集合的add事件，并将项目附加到您的视图中。

更新：在当前版本的骨干网中，您需要致电：

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

Answer 2

来自backbone.org网站的Collection method fetch。

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

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

Accounts.fetch();

您可以在网址的查询字符串中设置限制，例如/ accountants？offset = 0＆amp; limit = 50。

使用这些变量（offset，limit）限制数据库的查询结果。

在获取所请求的模型后修改查询字符串变量，以便当用户按下按钮或向下滚动页面时，下一批模型的请求将是/ accountants？offset = 50＆amp; limit = 50

Answer 3

我会在视图本身上执行此操作，而不是覆盖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;
}

Backbone：以增量方式获取模型

3 个答案: