廢話不說，直入正題。Backbone.js是什麼Backbone.js提供了一套web開發框架，通過Models進行key-value綁定及自定義事件處理，通過Collections提供一套豐富的API用於枚舉功能，通過Views來進行事件處理及現有的Application通過RESTful JSO...
廢話不說，直入正題。
Backbone.js是什麼
Backbone.js提供了一套web開發框架，通過Models進行key-value綁定及自定義事件處理，通過Collections提供一套豐富的API用於枚舉功能，通過Views來進行事件處理及現有的Application通過RESTful JSON介面進行交互，它是基於jQuery和underscore的一個前端js框架。
Backbone中的重要概念
-
Model：根據現實數據建立的抽象，比如people
-
Collection：比如一群人
-
View：對Model和Collection中的數據進行展示，把數據渲染到頁面上
-
Router：控制頁面的路由
通過Backbone，你可以把你的數據當作Model，通過Model你可以創建數據，進行數據驗證，銷毀或者保存到伺服器上。當界面上的操作引起model中屬性的變化時，model會觸發change的事件。那些用來顯示model狀態的views會接受到model觸發change的消息，進而發出對應的響應，並且重新渲染新的數據到界面。在一個完整的Backbone應用中，你不需要寫那些膠水代碼來從DOM中通過特殊的id來獲取節點，或者手工的更新HTML頁面，因為在model發生變化時，views會很簡單的進行自我更新。
感受一下
先上個例子感受一下：簡易考勤打卡系統。
下麵上代碼：
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button id="check">請點擊此處打卡</button>
<ul id="person-list"></ul>
</body>
<script>
(function($){
// 新建Model構造函數
var People=Backbone.Model.extend({
name:null,//姓名
ctime:null//打卡時間
});
// 新建Collection構造函數
var Peoples=Backbone.Collection.extend({
initialize:function(models,options){
this.bind("add",options.view.addOnePerson);//add將Model添加進Collection，在這裡調用View中定義的addOnePerson函數
}
});
// 新建View構造函數
AppView=Backbone.View.extend({
el:$("body"),
initialize:function(){
this.peoples=new Peoples(null,{view:this})//實例化一個Collection
},
events:{
"click #check":"checkIn",//綁定#check的click事件，並執行checkIn函數
},
checkIn:function(){
var person_name=prompt("您的姓名是？");
if(person_name==""){
person_name="路人甲";
}
var ctime=new Date().getHours()+":"+new Date().getMinutes()+":"+new Date().getSeconds();
var person=new People({name:person_name,ctime:ctime});
this.peoples.add(person);
},
addOnePerson:function(model){
$("#person-list").append("<li>"+model.get('name')+"您好，您的打卡時間為："+model.get('ctime')+"</li>");
}
});
var appview=new AppView;//實例化一個View，自動執行initialize中的函數
})(jQuery)
</script>
</html>
動手實踐
本節從Model、Collection、View和Router四個部分分別講解。
Model
對於Model這一部分，其官網是這麼說的：“Model是js應用的核心，包括基礎的數據以及圍繞著這些數據的邏輯：數據轉換、驗證、屬性計算和訪問控制”。這句話基本上高度概括了Model在一個項目中的作用。實際上，不僅僅是js應用，在任何以數據收集和處理的項目中Model都是很重要的一塊內容。
在web端，Model還有一個重要的功能就是和伺服器端進行數據交互，就像是伺服器端的程式需要和資料庫交互一樣。因此Model應該是攜帶數據流竄於各個模塊之間的東西。
所以說，Ajax操作，應該寫在Model層。
(function() {
var Man = Backbone.Model.extend({
defaults: {
name: "張三",
age: "38"
},
initialize: function() {
//初始化時綁定監聽，change事件會先於validate發生
this.bind("change:name", function() {
var name = this.get("name");
alert("你改變了name的屬性為：" + name);
});
this.bind("invalid", function(model, error) {
alert(error);
});
},
validate: function(attributes) {
if (attributes.name === '') {
return "name不能為空！";
}
},
aboutMe: function() {
return "我叫" + this.get("name") + ",今年" + this.get("age") + "歲";
}
});
var man = new Man();
alert(man.aboutMe());
man.set({
name: ''
});
man.save();//驗證
})();
model和伺服器端的交互，調用save方法會post對象的所有屬性到server端，調用fetch時又會發送get請求到server端，接受數據和發送數據的格式均為json格式。
下一期更新Collection。
