首页 > 代码库 > (五)backbone - DEMO - 通信录改造之使用requirejs
(五)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.active(item); 222 this.main.edit(item); 223 }224 });225 226 return {227 AppView:AppView,228 MainView:MainView229 };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 startwindow.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>
(五)backbone - DEMO - 通信录改造之使用requirejs
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。