Backbone主要涉及3部分：model，collection和view。而這個框架的優勢在於：數據與視圖分離，通過操作model來自動更新view。
根據我的個人經驗，直接寫個簡單的例子是最最直觀的，那么從hello world開始吧！
程序目標：創建人員，將人員添加入隊伍，刪除人員，清空隊列。
步驟1. model，理解成一個數據個體。
var People = Backbone.Model.extend({ //每個人都有他自身的屬性 defaults : { "name" : '阿三' } });
步驟2. collection，理解成數據隊列。
var Peoples = Backbone.Collection.extend({ //對集合的類型進行設定，這里設定為人的集合 model : People });
步驟3. view，每個偉大的視圖背后，都有默默的collection或者model。
var View = Backbone.View.extend({ //設定這個視圖的dom元素，也可以通過設定tagName, className, id 或者 attributes。如果沒有特別設定，Backbone會為它套上空的div標簽 el : $("body"), initialize : function() { //集合的事件綁定 this.collection.bind("add", this.addOne); this.collection.bind("remove", this.delOne); }, //使用了jquery的on方法，提供對視圖的事件代理 events : { "click #add" : "add", "click .del" : "del", "click #clear" : "clear", }, add : function() { var name = prompt("請輸入人名"); //創建一個新model var people = new People({ 'name' : name }); //並添加到人員隊列中,會觸發collection的add事件 peoples.add(people); }, del : function(obj) { //獲取要刪除的是哪個model var delWho = obj.currentTarget.id; //會觸發collection的remove事件 peoples.remove(delWho); }, //當collection發生了add事件 addOne : function(model) { //每個model會隨機生成一個唯一的cid，用來識別，區分 $("#list").append("<li>" + model.get('name') + "說：hello world！<button class='del' id='" + model.cid + "'>刪除</button></li>"); }, //當collection觸發了remove事件 delOne : function(model) { //使用jquery的remove方法，刪除dom和解除綁定的事件 $('#' + model.cid).parent().remove(); }, //清空數據 clear : function() { this.collection.reset(); this.clearAll(); }, //清空dom clearAll : function() { $('#list').empty(); } });
步驟4. 程序入口
var peoples = new Peoples; var app = new View({ collection : peoples });
這個例子還是比較直觀的。把每個人當作model，隊伍為collection，我們看到的界面是view。view綁定了collection的加減事件。通過對collection的操作，自動更新視圖。
完整代碼：
<%@ page language="java" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); %> <!DOCTYPE html> <html> <head> <title>backbone.js-Hello World</title> </head> <body> <button id="add">添加</button> <button id="clear">清空</button> <h3>隊列</h3> <ul id="list"></ul> </body> <script src="<%=path %>/demo/backone/jquery-1.8.3.js"></script> <script src="<%=path %>/demo/backone/underscore-min.js"></script> <script src="<%=path %>/demo/backone/backbone-min.js"></script> <script type="text/javascript"> (function() { //model,理解成一個數據個體 var People = Backbone.Model.extend({ //每個人都有他自身的屬性 defaults : { "name" : null } }); //collection，理解成數據隊列 var Peoples = Backbone.Collection.extend({ //對集合的類型進行設定，這里設定為人的集合 model : People }); //view，每個偉大的視圖背后，都有默默的collection或者model var View = Backbone.View.extend({ //設定這個視圖的dom元素，也可以通過設定tagName, className, id 或者 attributes。如果沒有特別設定，Backbone會為它套上空的div標簽 el : $("body"), initialize : function() { //集合的事件綁定，用來自動更新視圖 this.collection.bind("add", this.addOne); this.collection.bind("remove", this.delOne); }, //使用了jquery的on方法，提供對視圖的事件代理 events : { "click #add" : "add", "click .del" : "del", "click #clear" : "clear", }, add : function() { var name = prompt("請輸入人名"); //創建一個新model var people = new People({ 'name' : name }); //並添加到人員隊列中,會觸發collection的add事件 peoples.add(people); }, del : function(obj) { //獲取要刪除的是哪個model var delWho = obj.currentTarget.id; //會觸發collection的remove事件 peoples.remove(delWho); }, //當collection發生了add事件 addOne : function(model) { //每個model會隨機生成一個唯一的cid，用來識別，區分 $("#list").append("<li>" + model.get('name') + "說：hello world！<button class='del' id='" + model.cid + "'>刪除</button></li>"); }, //當collection觸發了remove事件 delOne : function(model) { //使用jquery的remove方法，刪除dom和解除綁定的事件 $('#' + model.cid).parent().remove(); }, //清空數據 clear : function(){ this.collection.reset(); this.clearAll(); }, //清空dom clearAll : function(){ $('#list').empty(); } }); //實例化 var peoples = new Peoples; var app = new View({ collection : peoples }); })(); </script> </html>
如果，您認為閱讀這篇博客讓您有些收獲，不妨點擊一下右下角的【推薦】。
如果，您希望更容易地發現我的新博客，不妨點擊一下左下角的【關注我】。
如果，您對我的博客所講述的內容有興趣，請繼續關注我的后續博客，我是【Ruthless】。
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。