（五）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 name 10 validate: function(attrs,options) { 11 if (attrs.name == "") { 12 return "what's the name?"; 13 }; 14 }, 15 // for user search 16 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: _store 32 }); 33 return _c; 34 })(); 35 36 return { 37 Contact:Contact, 38 Contacts:Contacts 39 }; 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 View 100 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:true 153 }); 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 view 172 // show and edit users 173 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 view 197 // all page view, for contact list and main view 198 var AppView = Backbone.View.extend({ 199 className: 'contacts', 200 initialize: function() { 201 this.contactList = new ContactListView({ 202 model: this.model 203 }); 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.active(item); 222 this.main.edit(item); 223 } 224 }); 225 226 return { 227 AppView:AppView, 228 MainView:MainView 229 }; 230 });
• router文件 router/router.js
1 define(["view/view","model/contact"], function (_view,_content){ 2 var dolymood = {}; 3 dolymood.contacts = new _content.Contacts(); 4 dolymood.appView = new _view.AppView({ 5 model:dolymood.contacts 6 }); 7 dolymood.AppRouter = Backbone.Router.extend({ 8 routes: { 9 '': 'show', 10 'contacts/:id': 'show', 11 'contacts/:id/edit': 'edit' 12 }, 13 show: function(id) { 14 if(id !== undefined){ 15 dolymood.appView.show(this.getContact(id)); 16 } 17 else { 18 dolymood.appView.show(dolymood.contacts.first()); 19 } 20 }, 21 edit: function(id) { 22 if(id !== undefined){ 23 dolymood.appView.edit(this.getContact(id)); 24 } 25 }, 26 getContact: function(id) { 27 return dolymood.contacts.get(id); 28 } 29 }); 30 31 return dolymood; 32 33 });
• main文件
使用main文件对应用进行启动
require(["router/router"], function (dolymood){ // app start window.appRouter = new dolymood.AppRouter(); Backbone.history.start(); });
• requirejs 的 引用
<script src="js/lib/requirejs.js" type="text/javascript" charset="utf-8" data-main="js/main.js"></script>