Backbone制作联系人管理之列表（1）

本系列将讲解使用backbone制作一个联系人管理器，共分为四个部分：

1.制作列表
2.增加类型过滤、和路由功能
3.增加添加、修改和删除功能
4.与服务器的数据同步

第一部分：制作列表

 

 

 

 

 

 

 

 

 

 

 

完成这个功能需要：

1.我们先采用假数据，即定义一个联系人数组。

 

var contacts = [
	{id: '1', name: '张三01', address: '北京市朝阳区', email: '[e-mail]', tel: '13211111111', type: '同事'},
	{id: '2', name: '张三02', address: '北京市朝阳区', email: '[e-mail]', tel: '13211111111', type: '同事'},
	{id: '3', name: '张三03', address: '北京市朝阳区', email: '[e-mail]', tel: '13211111111', type: '同事'},
	{id: '4', name: '张三04', address: '北京市朝阳区', email: '[e-mail]', tel: '13211111111', type: '朋友'},
	{id: '5', name: '张三05', address: '北京市朝阳区', email: '[e-mail]', tel: '13211111111', type: '朋友'},
	{id: '6', name: '张三06', address: '北京市朝阳区', email: '[e-mail]', tel: '13211111111', type: '朋友'},
	{id: '7', name: '张三07', address: '北京市朝阳区', email: '[e-mail]', tel: '13211111111', type: '家人'},
	{id: '8', name: '张三08', address: '北京市朝阳区', email: '[e-mail]', tel: '13211111111', type: '家人'},
	{id: '9', name: '张三09', address: '北京市朝阳区', email: '[e-mail]', tel: '13211111111', type: '家人'},
	{id: '10', name: '张三10', address: '北京市朝阳区', email: '[e-mail]', tel: '13211111111', type: '家人'}
];

 

 

2.定义联系人模型

 

//定义Contact Model
var Contact = Backbone.Model.extend({
	defaults: {
		photo: 'img/placeholder.png'
	}
});

3.定义存放联系人的集合

 

//定义Contact Collection
var ContactList = Backbone.Collection.extend({
	model: Contact
}); 

 

4.定义每个联系人名片的视图

 

//定义Contact View
var ContactView = Backbone.View.extend({
	tagName: 'artical',
	className: 'contact-container',
	template: $('#contactViewTmpl').html(),
	render: function(){
		var tmpl = _.template(this.template);
		$(this.el).html(tmpl(this.model.toJSON()));
		//为了链式调用
		return this;
	}
});

 

5.定义整个视图（程序入口）

 

//定义程序视图
var AppView = Backbone.View.extend({
	el: $('#contacts'),
	initialize: function(){
		//程序入口，获得数据，然后渲染页面
		this.collection = new ContactList(contacts);
		this.render();
	},
	render: function(){
		var that = this;
		_.each(this.collection.models, function(item){
			//动态传入model数据
			var contactView = new ContactView({model: item});
			that.$el.append(contactView.render().el);
		},this);
	}
});

 

 6.调用

 

var app = new AppView;

 

附件为源文件~