著手開始學(xué)習(xí)
    什么是backbone.js?
    美公的理解是 一種js的mvc的框架，分為Model(模型),View(視圖)和Collection(集合)，如果有mvc分層開發(fā)經(jīng)驗(yàn)的話，會(huì)容易理解。
    為什么學(xué)習(xí)這個(gè)?
    因?yàn)橛盟梢栽诘膯蝹€(gè)頁面完成多個(gè)應(yīng)用模塊，給用戶的感覺是不用刷新頁面，適合webapp開發(fā)
    $(function(){
    var testModel = Backbone.Model.extend({
    defaults:{
    id:"1",
    name:'meigong',
    age:'22'
    }
    });
    var Collection = Backbone.Collection.extend({
    model:testModel
    });
    var ItemView = Backbone.View.extend({
    tagName:'tr',
    template: _.template($('#tpl-item').html()),
    initialize: function(){
    this.model.bind('remove', this.unrender,this);
    this.model.bind('change', this.render,this);
    },
    events: {
    'click a.edit':'editItem',
    'click a.del':'delItem',
    "blur input,select" : "saveItem"
    },
    editItem:function(){
    //獲取所有的input
    var input = $(this.el).find('input');
    input.each(function(k,v){
    $(v).removeAttr('disabled');
    });
    },
    delItem:function(){
    //從集合中刪除
    app.collection.remove(this.model);
    },
    saveItem:function(){
    alert(2);
    },
    unrender:function(){
    $(this.el).remove();
    },
    render: function() {
    $(this.el).html(this.template(this.model.toJSON()));
    return this;
    }
    });
    var View = Backbone.View.extend({
    el:$('#test'),
    template: _.template($('#tpl-student').html()),
    initialize:function () {
    //this.model.bind("change", this.render, this);
    this.render();
    this.collection = new Collection();
    this.collection.bind('add', this.appendItem,this);
    this.id= 0;
    },
    events: {
    'click #btn':'addItem'
    },
    addItem:function(){
    this.id ++;
    this.testmodel = new testModel();
    this.testmodel.set({
    id:this.id
    });
    //添加到集合中
    this.collection.add(this.testmodel);
    },
    appendItem:function(){
    var itemView = new ItemView({model:this.testmodel});
    $(this.el).append(itemView.render().el);
    },
    render: function(eventName) {
    $(this.el).html(this.template());
    }
    });
    var app = new View();
    });
    開始說明：本例是美公筆記草稿，本地運(yùn)行沒問題，如拷貝代碼會(huì)缺少文件
    修改的地方
    1.把backone-min.js中的部分修改為create:”POST”,update:”POST”,”delete”:”DELETE”,read:”GET”
    2.服務(wù)器端接受 post過來的json數(shù)據(jù) $data = json_decode$GLOBALS['HTTP_RAW_POST_DATA']);
    用到的模板
    主文件代碼
    $(function(){
    //實(shí)例化 index列表
    //index列表的model
    var index_Model = Backbone.Model.extend({
    ", //請(qǐng)求的地址
    });
    //model的集合
    var index_Collection = Backbone.Collection.extend({
    model: index_Model, //集合包含的model層
    url: './get.php' //請(qǐng)求的地址
    });
    //對(duì)應(yīng)的每個(gè)元素的view
    var index_list_View = Backbone.View.extend({
    template: _.template($('#tpl-item').html()),
    initialize:function () {
    this.model.bind("change", this.render, this); //在model 執(zhí)行set,add,destroy時(shí)會(huì)觸發(fā)
    },
    events:{ //綁定事件
    'click .bannerImg':'addNum',
    'click .bannerInfo':'comment'
    },
    addNum:function(){
    //單擊圖片 顯示的名字會(huì)改變
    this.model.set({ //會(huì)觸發(fā)change事件
    'name':'超姐你好',
    });
    this.model.save(null,{ //發(fā)起一個(gè)post請(qǐng)求
    })
    },
    comment:function(){
    var id = this.model.get('id');
    app.navigate("comment/"+id, true); //hash導(dǎo)航url
    },
    render: function() {
    $(this.el).html(this.template(this.model.toJSON()));
    return this;
    }
    });
    //list View 是 index_list_View的集合
    var index_item_View = Backbone.View.extend({
    initialize: function() {
    this.model.bind('reset', this.render, this); //這里的model是個(gè)集合 傳入的是index_Collection
    var self = this;
    this.model.bind("add", function (item) { // 在 index_Collection 執(zhí)行add操作會(huì)觸發(fā) add 或者 發(fā)起create請(qǐng)求時(shí)也會(huì)觸發(fā)
    $(self.el).append(new index_list_View({model:item}).render().el);
    });
    },
    render: function(eventName) { //渲染
    //這里的model是個(gè)集合
    _.each(this.model.models,function(item) {
    $(this.el).append(new index_list_View({model: item}).render().el);
    },
    this);
    return this;
    }
    });
    //發(fā)表評(píng)論功能
    var comment_add_View = Backbone.View.extend({
    template: _.template($('#tpl-comment').html()),
    initialize:function () {
    this.render();
    },
    events:{
    'click .btn':'addCom',
    },
    addCom:function(){
    var title = $("input[name='title']").val();
    var data = {
    title:title
    }
    //這里必須寫app啊
    app.comment_collection.create(data,{
    ,
    success:function(){
    }
    });
    },
    render: function() {
    $(this.el).html(this.template()); //沒有model時(shí) 直接寫this.template() 。有model要解析model成字符串 用到的是this.model.toJSON()
    return this;
    }
    });
    /***顯示評(píng)論列表功能 代碼解釋同上**/
    var comment_Model = Backbone.Model.extend({
    ",
    defaults:{
    title:'',
    }
    });
    var comment_Collection = Backbone.Collection.extend({
    model: comment_Model,
    url: 'http://www.biuman.com/test/before/test'
    });
    var comment_list_View = Backbone.View.extend({
    template: _.template($('#tpl-comment-list').html()),
    initialize:function () {
    this.model.bind("change", this.render, this);
    },
    events:{
    },
    render: function() {
    $(this.el).html(this.template(this.model.toJSON()));
    return this;
    }
    });
    var comment_item_View = Backbone.View.extend({
    initialize: function() {
    this.model.bind('reset', this.render, this); //這里的model是個(gè)集合
    var self = this;
    this.model.bind("add", function (item) {
    $(self.el).append(new comment_list_View({model:item}).render().el);
    });
    },
    render: function(eventName) {
    //這里的model是個(gè)集合
    _.each(this.model.models,function(item) {
    $(this.el).append(new comment_list_View({model: item}).render().el);
    },
    this);
    return this;
    }
    });
    // Router
    var AppRouter = Backbone.Router.extend({
    routes: {
    "": "list",
    "comment/:id":"comment"
    },
    initialize: function() {
    },
    list: function() {
    if(typeof this.index_collection == 'undefined'){
    this.index_collection = new index_Collection();
    this.index_item_view = new index_item_View({
    model: this.index_collection //傳入的index_collection集合
    });
    var self = this;
    this.index_collection.fetch({
    success: function(collection, resp) {
    //console.dir(collection.models);
    }
    }); //fetch先綁定 rest事件
    }else{
    this.index_item_view = new index_item_View({
    model: this.index_collection
    });
    }
    $('#content').html(this.index_item_view.render().el);
    },
    comment:function(id){
    this.comment_collection = new comment_Collection();
    this.comment_item_view = new comment_item_View({
    model: this.comment_collection //傳入的集合
    });
    var self = this;
    this.comment_collection.fetch({
    ,
    success: function(collection, resp) {
    $('#content').append(new comment_add_View().render().el)
    }
    }); //fetch先綁定 rest事件
    $('#content').html(this.comment_item_view.render().el);
    }
    });
    var app = new AppRouter();
    Backbone.history.start();
    });