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.sync = function(method, model) {
  alert(method + ": " + model.url);
};

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

Accounts.fetch();

您可以在 url 的查询字符串中设置一个限制，例如 /accountants?offset=0&limit=50。

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

在获取请求的模型后修改查询字符串变量，以便当用户按下按钮或在您的页面上向下滚动时，对下一批模型的请求将是 /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 回答