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

 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 });

  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 });

 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 });

require(["router/router"], function (dolymood){ 

// app start
window.appRouter = new dolymood.AppRouter();
Backbone.history.start();
    
});

<script src="js/lib/requirejs.js" type="text/javascript" charset="utf-8" data-main="js/main.js"></script>