201507221403_《backbone之一——新建模型和集合、实例化模型、模型上监听事件的方法、模型设置和获取后台数据、配置理由方法、视图绑定事件的方法、绑定模型等》

一 . 新建

var model_1 = new Backbone.Model({‘name‘:‘hello‘});

var model_2 = new Backbone.Model({‘name‘:‘hi‘});

var models = new Backbone.Collection();

models.add( model_1 );

models.add( model_2 );

alert( JSON.stringify(models) );

二. 实例化模型

var M = Backbone.Model.extend({
    aaa : function(){
        alert(123);
    }
});

var ChildM = M.extend();

var model = new ChildM;
model.aaa();

三. 模型上监听事件的方法

$(function(){

var M = Backbone.Model.extend({
        defaults : {
            name : ‘hello‘
        }
    });
    
    var V = Backbone.View.extend({
            
        initialize : function(){
            
            this.listenTo( this.model , ‘change‘ , this.show );
            
        },
        show : function(model){
            $(‘body‘).append( ‘<div>‘+ model.get(‘name‘) +‘</div>‘ );
        }
        
    });
    
    
    var m = new M;
    var v = new V({model:m});
    m.set(‘name‘,‘hi‘);

});

四. 模型设置和获取后台数据

Backbone.sync = function(method, model) {
      alert(method + ": " + JSON.stringify(model));
};

var C = Backbone.Collection.extend({
    initialize : function(){
        this.on(‘reset‘,function(){
            alert(123);
        });
    }, 
    url: ‘/users‘
});

var models = new C;
models.fetch();

五. 配置理由方法

var Workspace = Backbone.Router.extend({

routes: {
        "help":                 "help",    // #help
        "search/:query":        "search",  // #search/kiwis
        "search/:query/p:page": "search"   // #search/kiwis/p7
    },
    
    help: function() {
        alert(1);
    },
    
    search: function(query, page) {
        alert(2);
    }

});

var w = new Workspace;
Backbone.history.start();

六. 视图绑定事件的方法

$(function(){
    
    var V = Backbone.View.extend({
        
        el : $(‘body‘),
        events : {
            ‘click input‘ : ‘aaa‘,
            ‘mouseover li‘ : ‘bbb‘
        },
        aaa : function(){
            alert(123);
        },
        bbb : function(){
            alert(456);
        }
        
    });
    
    var veiw = new V;
    
});

七. 绑定模型

$(function(){

var M = Backbone.Model.extend({
        defaults : {
            name : ‘hello‘
        }
    });
    
    var V = Backbone.View.extend({
            
        initialize : function(){
            
            this.listenTo( this.model , ‘change‘ , this.show );
            
        },
        show : function(model){
            $(‘body‘).append( this.template(this.model.toJSON()) );
        },
        template: _.template($(‘#template‘).html())
        
    });
    
    
    var m = new M;
    var v = new V({model:m});
    m.set(‘name‘,‘hi‘);

});

八.