过滤集合似乎是第一次令人生畏的任务,但事实上,真的很容易。过滤集合有多种方法,在这里我想展示最适合我的解决方案。我毫不犹豫地评论它,我’我总是很乐意改善我的东西。

当然,这篇文章不会完整,没有一点 生活演示

设置集合

我最喜欢的过滤器的方式在extend Collection声明中执行以下操作:

myapp.collection.Tasks = Backbone.Collection.extend({
	currentStatus : function(status){
		return _(this.filter(function(data) {
		  	return data.get("completed") == status;
		}));
	},
	search : function(letters){
		if(letters == "") return this;
 
		var pattern = new RegExp(letters,"gi");
		return _(this.filter(function(data) {
		  	return pattern.test(data.get("name"));
		}));
	}
});
// We instantiate our collection
var myTasks = new myapp.collection.Tasks([task1,task2,task3]);

在这里,我们得到了2个过滤器,一个检查已完成的属性,以及一个搜索名称属性中的文本模式的过滤器。我发现搜索功能特别有用。它’S一种非常简单而漂亮的模式,与输入更改事件一起使用,我们可以在飞行中收到一系列模型。

您可能也想知道为什么我用_()包装我的过滤器。好吧,似乎没有用下划线函数包装过滤器,过滤器不会返回一个集合,这对我来说是不用的。

当然,我们需要将此连接到视图中,我们需要2个浏览,一个用于列表容器和我们的过滤器,以及将创建我们列表的每个项目的视图。

myapp.view.TasksContainer = Backbone.View.extend({
	events: {
		"keyup #searchTask" : "search",
		"change #taskSorting":"sorts"
	},
	render: function(data) {
		$(this.el).html(this.template);
		return this;
	},
	renderList : function(tasks){
		$("#taskList").html("");
 
		tasks.each(function(task){
			var view = new myapp.view.TasksItem({
				model: task,
				collection: this.collection
			});
			$("#taskList").append(view.render().el);
		});
		return this;
	},
	initialize : function(){
		this.template = _.template($("#list_container_tpl").html());
		this.collection.bind("reset", this.render, this);
	},
	search: function(e){
		var letters = $("#searchTask").val();
		this.renderList(this.collection.search(letters));
	},	
	sorts: function(e){
		var status = $("#taskSorting").find("option:selected").val();
		if(status == "") status = 0;
		this.renderList(this.collection.currentStatus(status));
	}
});
 
// we would instantiate this view with our collection
this.listContainerView = new wedapp.view.TasksContainer({
	collection:myTasks
});
// print our template
$("#contentContainer").prepend(this.listContainerView.render().el);

自从我们在View Instantial经过我们的收藏以来,我们可以像这样使用它 this.collection.etc..

现在我们需要我们的项目视图。

myapp.view.TasksItem = Backbone.View.extend({
	events: {},
	render: function(data) {
		$(this.el).html(this.template(this.model.toJSON()));
		return this;
	},
	initialize : function(){
		this.template = _.template($("#task_item_tpl").html());
	}
});

这里没什么特别的。

那’s it!

当然,我补充说有点更多 我在github上的演示 使用完整的代码,它包含一个使用骨干路由器和下划线模板的更真实的例子。如果您在使用此作为基准引用之前出现问题过滤列表。