（五）backbone

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>