Question

我有一组布尔值为interviewed的模型，我想过滤它们以便我的视图显示将此属性设置为true的模型或将此属性设置为{{的模型1}}。在我的收藏中，我有以下方法：

false

在我看来，我有以下内容：

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方法管理它或者返回一个带有所需模型的新集合实例，但这不是解决方案，因为当我成功过滤初始集合时，它会返回一个带有模型I的新集合需要（例如模型reset），我不能过滤它 - 它只返回一个空集合。我无法理解如何以我需要的方式过滤这一个集合。

Answer 1

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

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();
}

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

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

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 2

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

这应该有效：

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 3

我建议你修改渲染函数来接受一个模型数组的参数。

现在，在渲染完整集合时，您可以将渲染调用为

$anchorScroll

如果过滤掉集合，那么过滤器函数很可能会从集合中返回模型子集。您可以再次传递给渲染函数

$achorScroll

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

现在，对于过滤集合，您可以使用过滤器，其中方法由下划线公开。记住捕获返回并将其传递给渲染函数..

过滤集合不起作用

3 个答案: