backbone簡介

基於underscore、非強制性依賴jquery/zepto的前端javascript框架。
backbone.js是一款web前端開發的javascript輕量級MVC框架；依託此框架，我們可以像高級語言一樣定義類、類屬性及方法，更好的組織代碼並按框架提供的數據邏輯分離方法減少代碼混亂。

本文需要的文件：

需要下載這3個js文件：[zepto](http://files.cnblogs.com/files/johnl/zepto.min.js)（jquery的替代品，你可以把它理解爲jquery的mini版）、[underscore](http://files.cnblogs.com/files/johnl/underscore.min.js)、[backbone](http://files.cnblogs.com/files/johnl/backbone.min.js)

<script src="js/zepto.min.js"></script>
<script src="js/underscore.min.js"></script>
<script src="js/backbone.min.js"></script>

backbone的4大模塊：

模型：Backbone.Model，一個數據模型

集合：Backbone.Collection，數據模型的一個集合

視圖：Backbone.View，數據處理，注意它並非我們傳統認知中的頁面模版

路由：Backbone.Router，路由配置

模型：

這是一個標準的對象模型（數據假定爲網站最常見的用戶），initialize爲初始化方法，默認執行定義的函數或監聽必要的事件；defaults爲初始化參數，定義的參數將作爲對象模型的默認參數。

var User = Backbone.Model.extend({
    initialize : function(){
    },
    defaults : {
        name : '大白兔'
        lang : '漢語'
    }
});

實例化對象模型User，並獲得對象屬性attributes，輸出的數據結構爲：Object {name: “大白兔”, lang: “漢語”}

var user = new User;
console.log(user.attributes);

調用set方法設置對象模型指定屬性、get方法可以獲得對象模型指定屬性值

var user = new User;
user.set({name : '小白兔'});
console.log(user.get('name'));

初始化方法initialize中監聽屬性變化事件change並在回調中自定義屬性變化的信息提示

var User = Backbone.Model.extend({
    initialize : function(){
        this.bind('change:name', function(){
            console.log(this.attributes);
        });
    },
    defaults : {
        name : '大白兔',
        lang : '漢語'
    },
});

var user = new User;
user.set({name : ''});

調用save方法提交對象模型數據、設置數據提交地址url

var User = Backbone.Model.extend({
    url : '/'
});

var user = new User;
user.save();

既然準備提交對象模型數據了，數據驗證方法validate中自定義數據校檢方法、初始化方法initialize中監聽提交失敗事件error並在回調中自定義返回錯誤的信息提示；一個關於模型的完整demo

var User = Backbone.Model.extend({
    url : '/',
    initialize : function(){
        this.bind('change:name', function(){
            console.log(this.attributes);
        });
        this.bind('error', function(){
            console.log('數據提交失敗');
        });
    },
    defaults : {
        name : '大白兔',
        lang : '漢語'
    },
    validate : function(obj){
        if(obj.name.length < 2) console.log('暱稱過短');
    }
});

var user = new User;
user.set({name : ''});
user.save();

集合：
現在我們要把實例化對象模型的數據存放在實例化對象集合中，就需用到集合了，這裏有點繞，樓主在這裏繞了很久；可以理解爲通過改變集合Users的屬性model的值爲模型User，從而指定了與集合Users相關聯的模型，這裏的模型是User

var User = Backbone.Model.extend({
    initialize : function(){
    },
    defaults : {
        name : '',
        lang : ''
    }
});

var Users = Backbone.Collection.extend({
    model : User
});

實例化對象集合，併爲對象集合添加add一組需按模型模式實例化的指定數據，然後打印對象集合內所有模型數據

var users = new Users;

var arr = [['大白兔', '漢語'], ['貝克漢姆', '英語'], ['齊達內', '法語']];
for(var i = 0; i < arr.length; i ++){
    var user = new User({
        name : arr[i][0],
        lang : arr[i][1]
    });
    users.add(user);
};

users.each(function(obj){
    console.log(obj.attributes);
});

初始化方法initialize中監聽數據添加事件add並在回調中自定義數據添加後的信息提示

var Users = Backbone.Collection.extend({
    initialize : function(){
        this.bind('add', function(obj){
            console.log('add', obj.attributes);
        });
    },
    model : User
});

既然是數據，就有添刪改；有了添加事件，對應的對象數據刪除事件remove、對象數據改變事件change；一個關於集合的完整demo

var User = Backbone.Model.extend({
    initialize : function(){
    },
    defaults : {
        name : '',
        lang : ''
    }
});

var Users = Backbone.Collection.extend({
    initialize : function(){
        this.bind('add', function(obj){
            console.log('add', obj.attributes);
        });
        this.bind('remove', function(obj){
            console.log('remove', obj.attributes);
        });
        this.bind('change', function(obj){
            console.log('change', obj.attributes);
        });
    },
    model : User
});

var users = new Users;

var arr = [['大白兔', '漢語'], ['貝克漢姆', '英語'], ['齊達內', '法語']];
for(var i = 0; i < arr.length; i ++){
    var user = new User({
        name : arr[i][0],
        lang : arr[i][1]
    });
    users.add(user);
};

user.set({
    name : '卡恩',
    lang : '德語'
});

users.remove(user);

視圖：
本想把視圖也一起寫完，但是發現視圖必須有相對應模型，於是視圖模型的合作纔是重點，雖然樓主也做好了例子但還不甚了了，待成熟後再專門說免得誤人誤己，只留一個demo

underscore爲我們提供了模板引擎，書寫格式如下所示，類似於jquery tmpl

<ul class="user"></ul>

<script id="user_tmpl" type="text/template">
<li><p><%=name %></p><div><%=lang %></div></li>
</script>

然後是javascript部分，這部分還沒思索透具體理解暫不寫

var User = Backbone.Model.extend({
    defaults : {
        name : '',
        lang : ''
    }
});

var Users = Backbone.Collection.extend({
    model : User
});
var users = new Users;

var Userv = Backbone.View.extend({
    initialize : function(){
        _.bindAll(this, 'render');
        users.bind('add', this.render);
    },
    el : '.user',
    template : _.template($('#user_tmpl').html()),
    render : function(){
        $(this.el).append(this.template(this.model.toJSON()));
        return this;
    }
});

var arr = [['大白兔', '漢語'], ['貝克漢姆', '英語'], ['齊達內', '法語']];
for(var i = 0; i < arr.length; i ++){
    var user = new User({
        name : arr[i][0],
        lang : arr[i][1]
    });
    users.add(user);
    new Userv({
        model : user
    });
};

同php交互方式：

$data = json_decode(file_get_contents('php://input'));
die(json_encode($data));