Question

我在Backbone.js上使用Marionette，并希望显示一个集合的子集，其中显示的项目数取决于浏览器宽度。

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

如果浏览器宽度为＆lt; = 600px，则仅显示5等

我会在两侧都有按钮来更改视图表示的索引，以便开始显示数组中的位置。

我可以使用循环索引的循环得到数组的子集 - ＆gt;显示的数量和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));
}

如何将screenwidth传递给render函数，以及如何在屏幕大小更改中重新渲染？ jquery会以某种方式绑定resize事件吗？

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

谢谢！

Answer 1

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

添加表示当前项目可见性的布尔属性 Collection's Model。
取决于该属性更改可见性（通过CSS display DOM元素在适当的View render方法中的属性。

所以代码可能如下所示：

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

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

1 个答案: