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

我在Backbone.js上使用的是木偶，我想显示集合的一个子集，显示的项目数量取决于浏览器的宽度

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

如果浏览器宽度是显示的数量和集合数。在（i）

//var集合已存在
var子集=新集合（）；
var N=地板（屏幕宽度/100）；
对于（var i=指数；i<指数+N；i++）{
增加（第（i）项中的集合）；
}

如何将屏幕宽度传递到渲染函数中，以及如何在屏幕大小更改时重新渲染？调整大小事件上的jquery绑定会有帮助吗

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

---

谢谢

我建议您使用另一种方法：

将表示当前项目可见性的布尔属性添加到 收藏的模型

根据该属性更改可见性（通过CSS

display

属性）在相应视图的

render

方法中的DOM元素

因此，代码可能如下所示：

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);
        });
    },
    ...
});

var MyModel=Backbone.Model.extend({
默认值：{
...
显示：真
},
...
});
var MyCollection=Backbone.Collection.extend({
型号：MyModel，
...
});
var MyItemView=Backbone.View.extend({
型号：MyModel，
...
render:function（）{
if（this.model.get（'display'））
this.el.html（this.template（this.model.toJSON（））.show（）；
其他的
这个。$el.hide（）；
},
...
});
var MyCollectionView=Backbone.View.extend({
收藏：MyCollection，
...
初始化：函数（）{
$（window.resize（u.bind（this.resize，this））；
},
调整大小：函数（）{
...
var N=地板（屏幕宽度/100）；
此.collection.each（函数（模型，i）{
型号设置（“显示”，i

在进一步研究之后，另一种可能是实现“过滤”功能，如木偶文档中所述，

filter:function（child、index、collection）{return index>displayIndex&&index<（屏幕宽度确定的数字）}

。。。。。想法？我实现了这个逻辑，它运行得很好。但是，有两件重要的事情是必需的：在初始化过程（MyCollectionView）中绑定后调用resize，并设置

modelEvents:{“change”：“render”}

，否则它在第一次过程中不会初始化为屏幕大小，并且模型本身不会自动渲染。注意，我使用的是木偶2.4.1，而不是裸主干网实现。我将等待另一种方法，然后按照回答进行标记，但这确实有效。谢谢这种方法的一个缺点是，它需要将所有项呈现给DOM，如果集合中的元素很大，这可能是禁止的。（分页等）

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);
        });
    },
    ...
});