（五）backbone - DEMO - 通信录改造之使用requirejs

DEMO介绍是

DEMO通信录的扩展，使用requirejs模块化整合

大体实现

•model文件 model/contact.js

 1 define(function (){ 2 // user contact  3 var Contact = (function(){ 4     var _c = Backbone.Model.extend({ 5         defaults: {   6             name: '小强',   7             email: '小强@无敌.com'   8         }, 9         // validate user name10         validate: function(attrs,options) {11             if (attrs.name == "") {  12               return "what's the name?";  13             };  14         },15         // for user search16         filter: function(query) {17             if (typeof(query) === 'undefined' || query === null || query === '') return true;  18             query = query.toLowerCase();  19             return this.get('name').toLowerCase().indexOf(query) != -1 || this.get('email').toLowerCase().indexOf(query) != -1;  20         }21     }); 22     return _c;23 })();24 25 var _store = (function(){26     return new Store("my-contacts"); 27 })();28 var Contacts = (function(){29     var _c = Backbone.Collection.extend({30         model: Contact,31         localStorage: _store32     });33     return _c;34 })();35 36 return {37     Contact:Contact,38     Contacts:Contacts39 };40 41 });

• view文件 view/view.js

  1 define(["model/contact"], function (_contact){  2   3 // one user contact view  4 var ContactItemView = Backbone.View.extend({  5     className: 'item',  6     template: _.template($('#tpl-item').html()),  7     events: {  8         'click': 'select'  9     }, 10     initialize: function() { 11         _.bindAll(this, 'select');    // select方法绑定到当前对象 12         this.model.bind('reset', this.render, this); 13         this.model.bind('change', this.render, this); 14         this.model.bind('destroy', this.remove, this); 15         if(this.model.view){ 16             this.model.view.remove(); 17         } 18         this.model.view = this; 19     }, 20     render: function() { 21         this.$el.html(this.template(this.model.toJSON())); 22         return this; 23     }, 24     select: function() {    // 选择某个联系人 25         apPRouter.navigate('contacts/' + this.model.cid, { 26             trigger: true 27         }); 28     }, 29     active: function() { 30         this.$el.addClass('active'); 31     }, 32     deactive: function() { 33         this.$el.removeClass('active'); 34     } 35 }); 36  37 // user contact list view 38 var ContactListView = Backbone.View.extend({ 39     className: 'sidebar', 40     template: _.template($('#tpl-sidebar').html()), 41     events: { 42         'click footer button': 'create',    // footer 标签内的 button 标签 click 事件 43         'click input': 'filter', 44         'keyup input': 'filter' 45     }, 46     initialize: function() { 47         _.bindAll(this, 'create', 'filter');    // 给 create,filter 函数绑定到当前对象 48         // model 监听事件 49         this.model.bind('reset', this.renderAll, this); 50         this.model.bind('add', this.add, this); 51         this.model.bind('remove', this.remove, this); 52     }, 53     render: function() { 54         $(this.el).html(this.template());   55         this.renderAll();   56         return this;   57     }, 58     renderAll: function() { 59         this.$(".items").empty();   60         this.model.each(this.renderOne, this);   61         this.filter();   62     }, 63     renderOne: function(contact) { 64         var view = new ContactItemView({ 65             model: contact 66         }); 67         this.$(".items").append(view.render().el); 68     }, 69     create: function() { 70         var contact = new _contact.Contact(); 71         this.model.add(contact); 72         appRouter.navigate('contacts/' + contact.cid + '/edit', { 73             trigger:true 74         }); 75     }, 76     filter: function() { 77         var query = $('input', this.el).val(); 78         this.model.each(function(contact, element, index, list) { 79             contact.view.$el.toggle(contact.filter(query)); 80         }); 81     }, 82     active: function(item){ 83         if (this.activeItem) { 84             this.activeItem.view.deactive(); 85         } 86         this.activeItem = item; 87         if (this.activeItem) { 88             this.activeItem.view.active();   89         } 90     }, 91     add: function(contact) { 92         this.renderOne(contact); 93     }, 94     remove: function(contact) { 95         console.log(contact);   96     } 97 }); 98  99 // show one user View100 var ShowView = Backbone.View.extend({101     className: 'show',102     template: _.template($('#tpl-show').html()),103     events: {104         'click .edit': 'edit'105     },106     initialize: function() {107         _.bindAll(this, 'edit');108     },109     render: function() {110         if(this.item){111             this.$el.html(this.template(this.item.toJSON()));112         }113         return this;114     },115     change: function(item) {116         this.item = item;  117         this.render();  118     },119     edit: function() {120         if (this.item) appRouter.navigate('contacts/' + this.item.cid + '/edit', {  121           trigger: true  122         });  123     }124 });125 126 // edit usr contact view 127 var EditView = Backbone.View.extend({128     className: 'edit',129     template: _.template($('#tpl-edit').html()),130     events: {131         'submit form': 'submit',132         'click .save': 'submit',133         'click .delete': 'remove'134     },135     initialize: function() {136         _.bindAll(this, 'submit', 'remove');137     },138     render: function() {139         if(this.item){140             this.$el.html(this.template(this.item.toJSON()));141         }142         return this;143     },144     change: function(item) {145         this.item = item;  146         this.render();  147     },148     submit: function() {149         this.item.set(this.form());150         this.item.save();151         appRouter.navigate('contacts/' + this.item.cid, {152             trigger:true153         });154         return false;155     },156     form: function() {157         return {158             name: this.$('form [name="name"]').val(),  159             email: this.$('form [name="email"]').val()  160         };161     },162     remove: function() {163         this.item.destroy();164         this.item = null;165         appRouter.navigate('', {  166           trigger: true  167         });168     }169 });170 171 // main view172 // show and edit users173 var MainView = Backbone.View.extend({174     className: 'main stack',175     initialize: function() {176         this.editView = new EditView();  177         this.showView = new ShowView();  178     },179     render: function() {180         this.$el.append(this.showView.render().el);181         this.$el.append(this.editView.render().el);182         return this;183     },184     edit: function(item) {185         this.showView.$el.removeClass('active');186         this.editView.$el.addClass('active');  187         this.editView.change(item);  188     },189     show: function(item) {190         this.editView.$el.removeClass('active');191         this.showView.$el.addClass('active');  192         this.showView.change(item);  193     }194 });195 196 // app view197 // all page view, for contact list and main view198 var AppView = Backbone.View.extend({199     className: 'contacts',200     initialize: function() {201         this.contactList = new ContactListView({202             model: this.model203         });204         this.main = new MainView();205         this.vdiv = $('<div />').addClass('vdivide');206         this.model.fetch();207         this.render();208     },209     render: function() {210         this.$el.append(this.contactList.render().el);211         this.$el.append(this.vdiv);212         this.$el.append(this.main.render().el);213         $('#article').append(this.el);  214         return this;  215     },216     show: function(item){217         this.contactList.active(item);  218         this.main.show(item);  219     },220     edit: function(item){221         this.contactList.a