过滤 collection 不起作用

Question

我有 collection 个布尔值 interviewed 的模型，我想过滤它们，以便我的视图显示任何一个模型属性设置为 true 或此属性设置为 false 的模型。在我的 collection 中，我有以下方法：

var ResumeCollection = Backbone.Collection.extend({
    filterActive: function () {
        var active = this.where({interviewed: false});
        return active;
    },

    filterInterviewed: function () {
        var interviewed = this.where({interviewed: true});
        return interviewed;
    }
});

在我看来，我有以下几点：

var ResumeList = Backbone.View.extend({
    events: {
        'click #active': 'showActive',
        'click #interviewed': 'showInterviewed'
    },

    initialize: function () {
        this.collection = new ResumeCollection();
    },

    render: function () {
        var self = this;
        this.$el.html( $('#filter') );
        _.each(this.collection.toArray(), function (cv) {
            self.$el.append((new ResumeView({model: cv})).render().$el);
        });
    },

    showActive: function () {
        this.collection.filterActive();
        this.render();
    },

    showInterviewed: function () {
        this.collection.filterInterviewed();
        this.render();
    }
});

但是每次我单击 #active 或 #interviewed 按钮时，都没有任何反应，并且不会呈现具有所需属性的模型。我已经尝试使用 reset 方法或返回具有所需模型的新 collection 实例来管理它，但这不是解决方案，因为当我成功过滤初始 collection 时，它 returns 给我一个新的 collection 和我需要的模型（例如 interviewed: true 的模型），我不能再过滤它了——它 returns 只是一个空的 collection. 我只是不知道如何以我需要的方式过滤这个collection。

Answer 1

您的问题是您没有返回过滤后的集合。

这应该有效：

filterActive: function () {
    var active = this.filter(function(item) {
        return item.get('interviewed') === false;
    });

    return new ResumeCollection(active);
},

filterInterviewed: function () {
    var interviewed = this.filter(function(item) {
        return item.get('interviewed') === true;
    });

    return new ResumeCollection(interviewed);
},

Answer 2

您正在 return 过滤成功的集合，然后不对它们进行任何操作。

showActive: function () {
    this.collection.filterActive();//returns a value you're not using
    this.render();
},

showInterviewed: function () {
    this.collection.filterInterviewed();//returns a value you're not using
    this.render();
}

我建议在您的呈现方法中添加一个可选参数来表示过滤后的集合。如果定义了参数，则使用它。如果不是，请使用未过滤的集合。

借用@Simo 的一些代码来return 一个新的集合。

filterActive: function () {
    var active = this.where({interviewed: false});
    return new ResumeCollection(active);
},

filterInterviewed: function () {
    var interviewed = this.where({interviewed: true});
    return new ResumeCollection(interviewed);
},

render: function (filtered) {
    var self = this;
    var data = filtered ? filtered.toArray() : this.collection.toArray();
    this.$el.html( $('#filter') );
    _.each(data , function (cv) {
        self.$el.append((new ResumeView({model: cv})).render().$el);
    });
},

showActive: function () {
    var filtered = this.collection.filterActive();
    this.render(filtered);
},

showInterviewed: function () {
    var filtered = this.collection.filterInterviewed();
    this.render(filtered);
}

Answer 3

我建议您修改渲染函数以接受一个参数，该参数将是模型数组。

现在渲染完整集合时可以调用 render as

render(this.collection.models) // reference to list of models

此外，如果您过滤掉集合，则过滤函数很可能是 return从集合中提取模型子集。您可以再次将其传递给渲染函数

this.render(this.showActive()) // showActive returns subset of models from collection

这样你的渲染函数就变成了模块化..它接受数组然后在页面上渲染..

现在要过滤掉集合，您可以使用 filter ，其中方法由下划线公开.. 记得捕获 return 并将其传递给渲染函数..

过滤 collection 不起作用

Filtering the collection doesn't work

javascript

jquery

backbone.js