过滤集合不起作用
我有一组模型采用布尔值interviewed ，我想过滤它们，以便我的视图显示具有此属性设置为true模型或具有此属性设置为false 。 在我的collections中，我有以下方法：
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方法管理它或者返回一个带有所需模型的新集合实例，但这不是一个解决方案，因为当我成功过滤初始集合时，它会返回一个包含我需要的模型的新集合（例如模型）在哪里interviewed: true ），我不能过滤它 – 它只返回一个空集合。 我无法得到如何以我需要的方式过滤这一个集合。
您将返回成功过滤的集合，然后不对它们执行任何操作。
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); }
您的问题是您没有返回过滤后的集合。
这应该工作：
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); },
我建议你修改你的渲染函数来接受一个模型数组的参数。
现在，在渲染完整集合时，您可以将渲染调用为
render(this.collection.models) // reference to list of models
此外，如果您过滤掉集合，那么filter函数很可能是从集合中返回模型的子集。 您可以再次传递给渲染function
this.render(this.showActive()) // showActive returns subset of models from collection
这样你的渲染函数就变成了模块化的..它接受数组并在页面上渲染。
现在，对于过滤集合，您可以使用filter，其中方法由下划线公开。 记住捕获返回并将其传递给渲染函数..