（四）backbone - DEMO - 通信录

DEMO介绍

是DEMO - User List 的扩展，增加查询

大体实现

•创建ContactModel

 1 var Contact = Backbone.Model.extend({ 2     defaults: {   3         name: '小强',   4         email: 'walker@dead.com'   5     }, 6     // validate user name 7     validate: function(attrs,options) { 8         if (attrs.name == "") {   9           return "what's the name?";  10         };  11     },12     // for user search13     filter: function(query) {14         if (typeof(query) === 'undefined' || query === null || query === '') return true;  15         query = query.toLowerCase();  16         return this.get('name').toLowerCase().indexOf(query) != -1 || this.get('email').toLowerCase().indexOf(query) != -1;  17     }18 });

•创建ContactCollection

1 var Contacts = Backbone.Collection.extend({2     model: Contact,3     localStorage: new Store('my-contacts')　　// 存至本地 　　4 });

•视图

- 每条联系人视图

 1 var ContactItemView = Backbone.View.extend({ 2     className: 'item', 3     template: _.template($('#tpl-item').html()), 4     events: { 5         'click': 'select' 6     }, 7     initialize: function() { 8         _.bindAll(this, 'select');    // select方法绑定到当前对象 9         this.model.bind('reset', this.render, this);10         this.model.bind('change', this.render, this);11         this.model.bind('destroy', this.remove, this);12         if(this.model.view){13             this.model.view.remove();14         }15         this.model.view = this;16     },17     render: function() {18         this.$el.html(this.template(this.model.toJSON()));19         return this;20     },21     select: function() {    // 选择某个联系人22         apPRouter.navigate('contacts/' + this.model.cid, {23             trigger: true24         });25     },26     active: function() {    // 选中状态27         this.$el.addClass('active');28     },29     deactive: function() {    // 未选中状态30         this.$el.removeClass('active');31     }32 });

- 联系人列表视图，实现功能：

渲染列表、实例化ContactItemView、添加Contact、查询

 1 var ContactListView = Backbone.View.extend({ 2     className: 'sidebar', 3     template: _.template($('#tpl-sidebar').html()), 4     events: { 5         'click footer button': 'create',    // footer 标签内的 button 标签 click 事件 6         'click input': 'filter', 7         'keyup input': 'filter' 8     }, 9     initialize: function() {10         _.bindAll(this, 'create', 'filter');    // 给 create,filter 函数绑定到当前对象11         // model 监听事件12         this.model.bind('reset', this.renderAll, this);13         this.model.bind('add', this.add, this);14         this.model.bind('remove', this.remove, this);15     },16     render: function() {17         $(this.el).html(this.template());  18         this.renderAll();  19         return this;  20     },21     renderAll: function() {22         this.$(".items").empty();  23         this.model.each(this.renderOne, this);  24         this.filter();  25     },26     renderOne: function(contact) {27         var view = new ContactItemView({28             model: contact29         });30         this.$(".items").append(view.render().el);31     },32     create: function() {33         var contact = new Contact();34         this.model.add(contact);35         appRouter.navigate('contacts/' + contact.cid + '/edit', {36             trigger:true37         });38     },39     filter: function() {40         var query = $('input', this.el).val();41         this.model.each(function(contact, element, index, list) {42             contact.view.$el.toggle(contact.filter(query));43         });44     },45     active: function(item){46         if (this.activeItem) {47             this.activeItem.view.deactive();48         }49         this.activeItem = item;50         if (this.activeItem) {51             this.activeItem.view.active();  52         }53     },54     add: function(contact) {55         this.renderOne(contact);56     },57     remove: function(contact) {58         console.log(contact);  59     }60 });

- 显示联系人信息视图，实现：

切换当前联系人，并展示

 1 var ShowView = Backbone.View.extend({ 2     className: 'show', 3     template: _.template($('#tpl-show').html()), 4     events: { 5         'click .edit': 'edit' 6     }, 7     initialize: function() { 8         _.bindAll(this, 'edit'); 9     },10     render: function() {11         if(this.item){12             this.$el.html(this.template(this.item.toJSON()));13         }14         return this;15     },16     change: function(item) {17         this.item = item;  18         this.render();  19     },20     edit: function() {21         if (this.item) appRouter.navigate('contacts/' + this.item.cid + '/edit', {  22           trigger: true  23         });  24     }25 });

- 编辑联系人信息视图，实现：

修改保存、删除联系人

 1 // edit usr contact view  2 var EditView = Backbone.View.extend({ 3     className: 'edit', 4     template: _.template($('#tpl-edit').html()), 5     events: { 6         'submit form': 'submit', 7         'click .save': 'submit', 8         'click .delete': 'remove' 9     },10     initialize: function() {11         _.bindAll(this, 'submit', 'remove');12     },13     render: function() {14         if(this.item){15             this.$el.html(this.template(this.item.toJSON()));16         }17         return this;18     },19     change: function(item) {20         this.item = item;  21         this.render();  22     },23     submit: function() {24         this.item.set(this.form());25         this.item.save();26         appRouter.navigate('contacts/' + this.item.cid, {27             trigger:true28         });29         return false;30     },31     form: function() {32         return {33             name: this.$('form [name="name"]').val(),  34             email: this.$('form [name="email"]').val()  35         };36     },37     remove: function() {38         this.item.destroy();39         this.item = null;40         appRouter.navigate('', {  41           trigger: true  42         });43     }44 });

- 主视图，联系人展示、编辑管理视图

实例化展示视图、编辑视图；切换展示视图、编辑视图

 1 var MainView = Backbone.View.extend({ 2     className: 'main stack', 3     initialize: function() { 4         this.editView = new EditView();   5         this.showView = new ShowView();   6     }, 7     render: function() { 8         this.$el.append(this.showView.render().el); 9         this.$el.append(this.editView.render().el);10         return this;11     },12     edit: function(item) {13         this.showView.$el.removeClass('active');14         this.editView.$el.addClass('active');  15         this.editView.change(item);  16     },17     show: function(item) {18         this.editView.$el.removeClass('active');19         this.showView.$el.addClass('active');  20         this.showView.change(item);  21     }22 });

- 总页面视图：

实例化列表视图、主视图

 1 var AppView = Backbone.View.extend({ 2     className: 'contacts', 3     initialize: function() { 4         this.contactList = new ContactListView({ 5             model: this.model 6         }); 7         this.main = new MainView(); 8         this.vdiv = $('<div />').addClass('vdivide'); 9         this.model.fetch();10         this.render();11     },12     render: function() {13         this.$el.append(this.contactList.render().el);14         this.$el.append(this.vdiv);15         this.$el.append(this.main.render().el);16         $('#article').append(this.el);  17         return this;  18     },19     show: function(item){20         this.contactList.active(item);  21         this.main.show(item);  22     },23     edit: function(item){24         this.contactList.active(item);  25         this.main.edit(item);  26     }27 });

•路由

 1 dolymood.contacts = new Contacts(); 2 dolymood.appView = new AppView({ 3     model:dolymood.contacts 4 }); 5 dolymood.AppRouter = Backbone.Router.extend({ 6     routes: { 7         '': 'show', 8         'contacts/:id': 'show', 9         'contacts/:id/edit': 'edit'10     },11     show: function(id) {12         if(id !== undefined){13