根据屏幕大小显示Backbone.js集合的子集

Question

我在Backbone.js之上使用Marionette，并且想要显示集合的子集，显示依赖于浏览器宽度的项数。

例如：集合中的20个项目。每个ItemView以100px宽的div显示。

如果浏览器宽度为< = 600px的，只显示5等

我不得不在任一侧上的按钮改变为其中阵列中开始显示的视图表示指数。

我可以得到数组的子集，使用循环遍历起始索引 - >显示的数目和Collection.at（i）。

//var collection already exists 
var subset = new Collection(); 
var N = floor(screenwidth/100); 
for(var i = index; i< index+N; i++){ 
    subset.add(collection.at(i)); 
} 

如何将屏幕宽度传递到渲染函数，以及如何重新渲染屏幕尺寸更改？ jquery会以某种方式绑定resize事件吗？

（注：数字显示的逻辑是不完全正确的，因为我还不知道最好的多少相对于其他屏幕元素）

谢谢！

Answer 1

我会建议你使用另一种方法：

1. 添加代表当前项目的知名度布尔属性您 收藏的模型。
2. 取决于相应View的render方法中DOM元素的属性更改可见性（通过CSS display 属性）。

因此，代码可能是这样的：

var MyModel = Backbone.Model.extend({ 
    defaults: { 
     ... 
     display: true 
    }, 
    ... 
}); 

var MyCollection = Backbone.Collection.extend({ 
    model: MyModel, 
    ... 
}); 

var MyItemView = Backbone.View.extend({ 
    model: MyModel, 
    ... 
    render: function() { 
     if (this.model.get('display')) 
      this.$el.html(this.template(this.model.toJSON())).show(); 
     else 
      this.$el.hide(); 
    }, 
    ... 
}); 

var MyCollectionView = Backbone.View.extend({ 
    collection: MyCollection, 
    ... 
    initialize: function() { 
     $(window).resize(_.bind(this.resize, this)); 
    }, 
    resize: function() { 
     ... 
     var N = floor(screenwidth/100); 
     this.collection.each(function(model, i) { 
      model.set('display', i < N); 
     }); 
    }, 
    ... 
});