backbone.js笔记

1：backbone创建模型与集合的方法

<script>

//var model = new Backbone.Model();
//
//var models = new Backbone.Collection();
//
//var view = new Backbone.View();

//var model = new Backbone.Model();
//
//model.set(‘name‘,‘hello‘);
//
//alert( model.get(‘name‘) );

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

</script>

2实例化模型的方法：

<script>

//var M = Backbone.Model.extend({
//    aaa : function(){  //实例方法
//        alert(123);
//    }
//},{
//    bbb : function(){  //静态方法
//        alert(456);
//    }
//});
//
//var model = new M;
//model.aaa();
//M.bbb();


//var M = Backbone.Model.extend({
//    defaults : {
//        name : ‘hello‘
//    }
//});
//
//var model = new M;
//alert( model.get(‘name‘) );


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

var ChildM = M.extend();

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

</script>

3：模型上监听事件的方法：

<script>

//var M = Backbone.Model.extend({
//    defaults : {
//        name : ‘hello‘
//    },
//    initialize : function(){  //初始化构造函数
//        
//        this.on(‘change‘,function(){
//            alert(123);
//        });
//        
//    }
//});
//
//var model = new M;
//model.set(‘name‘,‘hi‘);







//var M = Backbone.Model.extend({
//    defaults : {
//        name : ‘hello‘
//    },
//    initialize : function(){  //初始化构造函数
//        
//        this.on(‘change:name‘,function(model){
//            
//            console.log(model);
//            
//        });
//        
//    }
//});
//
//var model = new M;
//model.set(‘name‘,‘hi‘);


$(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‘);

});

4模型设置和获取后台数据的方法

<script>

//Backbone.sync = function(method, model) {
//      alert(method + ": " + JSON.stringify(model));
//      model.id = 1;
//};
//
//var M = Backbone.Model.extend({
//    defaults : {
//        name : ‘hello‘
//    },
//    url : ‘/user‘
//});
//
//var m = new M;
//m.save();
//m.save({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();

</script>

5配置路由的方法

<script>

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

</script>

6视图绑定事件的方法

<script>

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

</script>

7绑定模型的例子：

<script>

//$(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‘);
//
//});









$(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‘);

});

</script>
</head>

<body>

<!--<script type="text/template" id="template">
    
    <div><%= name %></div>
    
</script>-->




<script type="text/template" id="template">
    <% for (var i=0;i<5;i++) { %>
        <div><%= name %></div>
    <% } %>
</script>
</body>