Backbone制作联系人管理之过滤和路由（2）

第二部分 添加类型过滤和路由功能

 

 

 

 

 

 

 

 

 

 

 

 

如图这部分我们加入左上角的功能（基于第一部分来做的）：

一、创建select，并填充数据

1.在index.html中添加标签

<header>
       <div id="filter"><label>Show me:</label></div>
</header>

2.添加列表数据

由于这个和联系人视图平级都属于AppView要渲染的内容，所以可以现在AppView的render方法中添加功能代码：

//渲染下拉列表
this.$el.find('#filter').append(this.createSelect());

3.添加createSelect和fetchTypes方法 

createSelect: function(){
	var select = $('<select><option value="all">All</option></select>');		
	_.each(this.getTypes(), function(item){
		var option = $("<option/>",{
			value: item,
			text: item
		}).appendTo(select);
	});
	return select;
},
//获得类型数组
getTypes: function(){
	return _.uniq(this.collection.pluck('type'));
}

 二、过滤实现

1.给select标签绑定chang事件，可以给AppView定义events属性

events: {
	'change #filter select': 'setFilter'
}

2.setFilter的定义，创建了filterType属性

setFilter: function(e){
	//定义filterType属性
	this.filterType = e.currentTarget.value;
	this.trigger('change:filterType');
} 

3.在AppView初始化时绑定filterType属性

this.on('change:filterType',this.filterByType,this);

4.过滤功能逻辑

filterByType: function(){
	if(this.filterType === 'all'){
		this.collection.reset(contacts);
	}else{
		this.collection.reset(contacts , {slient: true});
		var filterType = this.filterType,
			filtered = _.filter(this.collection.models, function(item){
				return item.get('type') == filterType;
			});
		this.collection.reset(filtered);
	}
}

 

reset方法可以重置集合中的对象，同时也会触发reset事件，当含有{slient:true}时，是不会触发reset事件的，看来我们还需绑定this.collection的reset事件，该事件触发时调用render方法重新渲染。

this.collection.on('reset',this.render,this);

三、路由实现 

我们的应用现在也不支持浏览器直接访问某种类型的联系人，也没有后退功能，我们可以利用hash来实现这部分功能。

例如：当访问地址为：http://yoursite.com/#filter/同学，则页面显示同学分类

我们先定义一个路由：

//定义路由
var ContactsRouter = Backbone.Router.extend({
	routes: {
		'filter/:type': 'urlFilter'
	},
	urlFilter: function(type){
		app.filterType = type;
		app.trigger('change:filterType');
	}
});

 

创建路由和启动路由功能

var contactsRouter = new ContactsRouter();
Backbone.history.start();

 修改filterByType方法，增加：

contactsRouter.navigate('filter/All');

contactsRouter.navigate('filter/'+filterType);

 

附上源代码

 

评论

1 楼 tiankong6622 2012-08-29  

[b][/b][i][/i][u][/u]

[img][/img][url][/url][flash=200,200][/flash]