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

DEMO介绍是

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

大体实现

• model文件 model/contact.js

 define(function (){
 // user contact
 var Contact = (function(){
     var _c = Backbone.Model.extend({
         defaults: {
             name: '小强',
             email: '小强@无敌.com'
         },
         // validate user name
         validate: function(attrs,options) {
             if (attrs.name == "") {
               return "what's the name?";
             };
         },
         // for user search
         filter: function(query) {
             if (typeof(query) === 'undefined' || query === null || query === '') return true;
             query = query.toLowerCase();
             return this.get('name').toLowerCase().indexOf(query) != -1 || this.get('email').toLowerCase().indexOf(query) != -1;
         }
     });
     return _c;
 })();

 var _store = (function(){
     return new Store("my-contacts");
 })();
 var Contacts = (function(){
     var _c = Backbone.Collection.extend({
         model: Contact,
         localStorage: _store
     });
     return _c;
 })();

 return {
     Contact:Contact,
     Contacts:Contacts
 };

 });

• view文件 view/view.js

 define(["model/contact"], function (_contact){

 // one user contact view
 var ContactItemView = Backbone.View.extend({
     className: 'item',
     template: _.template($('#tpl-item').html()),
     events: {
         'click': 'select'
     },
     initialize: function() {
         _.bindAll(this, 'select');    // select方法绑定到当前对象
         this.model.bind('reset', this.render, this);
         this.model.bind('change', this.render, this);
         this.model.bind('destroy', this.remove, this);
         if(this.model.view){
             this.model.view.remove();
         }
         this.model.view = this;
     },
     render: function() {
         this.$el.html(this.template(this.model.toJSON()));
         return this;
     },
     select: function() {    // 选择某个联系人
         appRouter.navigate('contacts/' + this.model.cid, {
             trigger: true
         });
     },
     active: function() {
         this.$el.addClass('active');
     },
     deactive: function() {
         this.$el.removeClass('active');
     }
 });

 // user contact list view
 var ContactListView = Backbone.View.extend({
     className: 'sidebar',
     template: _.template($('#tpl-sidebar').html()),
     events: {
         'click footer button': 'create',    // footer 标签内的 button 标签 click 事件
         'click input': 'filter',
         'keyup input': 'filter'
     },
     initialize: function() {
         _.bindAll(this, 'create', 'filter');    // 给 create,filter 函数绑定到当前对象
         // model 监听事件
         this.model.bind('reset', this.renderAll, this);
         this.model.bind('add', this.add, this);
         this.model.bind('remove', this.remove, this);
     },
     render: function() {
         $(this.el).html(this.template());
         this.renderAll();
         return this;
     },
     renderAll: function() {
         this.$(".items").empty();
         this.model.each(this.renderOne, this);
         this.filter();
     },
     renderOne: function(contact) {
         var view = new ContactItemView({
             model: contact
         });
         this.$(".items").append(view.render().el);
     },
     create: function() {
         var contact = new _contact.Contact();
         this.model.add(contact);
         appRouter.navigate('contacts/' + contact.cid + '/edit', {
             trigger:true
         });
     },
     filter: function() {
         var query = $('input', this.el).val();
         this.model.each(function(contact, element, index, list) {
             contact.view.$el.toggle(contact.filter(query));
         });
     },
     active: function(item){
         if (this.activeItem) {
             this.activeItem.view.deactive();
         }
         this.activeItem = item;
         if (this.activeItem) {
             this.activeItem.view.active();
         }
     },
     add: function(contact) {
         this.renderOne(contact);
     },
     remove: function(contact) {
         console.log(contact);
     }
 });

 // show one user View
 var ShowView = Backbone.View.extend({
     className: 'show',
     template: _.template($('#tpl-show').html()),
     events: {
         'click .edit': 'edit'
     },
     initialize: function() {
         _.bindAll(this, 'edit');
     },
     render: function() {
         if(this.item){
             this.$el.html(this.template(this.item.toJSON()));
         }
         return this;
     },
     change: function(item) {
         this.item = item;
         this.render();
     },
     edit: function() {
         if (this.item) appRouter.navigate('contacts/' + this.item.cid + '/edit', {
           trigger: true
         });
     }
 });

 // edit usr contact view
 var EditView = Backbone.View.extend({
     className: 'edit',
     template: _.template($('#tpl-edit').html()),
     events: {
         'submit form': 'submit',
         'click .save': 'submit',
         'click .delete': 'remove'
     },
     initialize: function() {
         _.bindAll(this, 'submit', 'remove');
     },
     render: function() {
         if(this.item){
             this.$el.html(this.template(this.item.toJSON()));
         }
         return this;
     },
     change: function(item) {
         this.item = item;
         this.render();
     },
     submit: function() {
         this.item.set(this.form());
         this.item.save();
         appRouter.navigate('contacts/' + this.item.cid, {
             trigger:true
         });
         return false;
     },
     form: function() {
         return {
             name: this.$('form [name="name"]').val(),
             email: this.$('form [name="email"]').val()
         };
     },
     remove: function() {
         this.item.destroy();
         this.item = null;
         appRouter.navigate('', {
           trigger: true
         });
     }
 });

 // main view
 // show and edit users
 var MainView = Backbone.View.extend({
     className: 'main stack',
     initialize: function() {
         this.editView = new EditView();
         this.showView = new ShowView();
     },
     render: function() {
         this.$el.append(this.showView.render().el);
         this.$el.append(this.editView.render().el);
         return this;
     },
     edit: function(item) {
         this.showView.$el.removeClass('active');
         this.editView.$el.addClass('active');
         this.editView.change(item);
     },
     show: function(item) {
         this.editView.$el.removeClass('active');
         this.showView.$el.addClass('active');
         this.showView.change(item);
     }
 });

 // app view
 // all page view, for contact list and main view
 var AppView = Backbone.View.extend({
     className: 'contacts',
     initialize: function() {
         this.contactList = new ContactListView({
             model: this.model
         });
         this.main = new MainView();
         this.vdiv = $('<div />').addClass('vdivide');
         this.model.fetch();
         this.render();
     },
     render: function() {
         this.$el.append(this.contactList.render().el);
         this.$el.append(this.vdiv);
         this.$el.append(this.main.render().el);
         $('#article').append(this.el);
         return this;
     },
     show: function(item){
         this.contactList.active(item);
         this.main.show(item);
     },
     edit: function(item){
         this.contactList.active(item);
         this.main.edit(item);
     }
 });

 return {
     AppView:AppView,
     MainView:MainView
 };
 });

• router文件 router/router.js

 define(["view/view","model/contact"], function (_view,_content){
 var dolymood = {};
 dolymood.contacts = new _content.Contacts();
 dolymood.appView = new _view.AppView({
     model:dolymood.contacts
 });
 dolymood.AppRouter = Backbone.Router.extend({
     routes: {
         '': 'show',
         'contacts/:id': 'show',
         'contacts/:id/edit': 'edit'
     },
     show: function(id) {
         if(id !== undefined){
             dolymood.appView.show(this.getContact(id));
         }
         else {
             dolymood.appView.show(dolymood.contacts.first());
         }
     },
     edit: function(id) {
         if(id !== undefined){
             dolymood.appView.edit(this.getContact(id));
         }
     },
     getContact: function(id) {
         return dolymood.contacts.get(id);
     }
 });

 return dolymood;

 });

• 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>