BackBone.js入門教程
來自： http://www.cnblogs.com/depsi/p/5151809.html
廢話不說，直入正題。
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=";
<script src=";
<script src=";
<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></code></pre>
動手實踐
本節從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。
</code></code></div>