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>