backbone是一個前端mvc的框架，雖說出來有段時間了，但直到最近才開始學習下，並寫了個demo幫助新手入門...
本demo配合seajs開發（一個模塊加載器，這里寫了篇seajs小記說明如何使用seajs）...
demo結構圖
demo.htm
<!doctype html>
<html>
<head>
<title>backbone</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
line-height: 50px;
}
.container
{
width: 1003px;
margin: 0 auto;
background-color: #eee;
}
#menu
{
background-color: #2E9F54;
height: 30px;
line-height: 30px;
}
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li
{
float: left;
margin-left: 10px;
cursor: pointer;
}
#page
{
text-align: center;
padding-top: 10px;
}
img
{
cursor: pointer;
border: 1px solid #fff;
}
.footer
{
text-align: center;
}
</style>
<script src="js/libs/jquery/jquery.js" type="text/javascript"></script>
<script src="js/libs/underscore/underscore.js" type="text/javascript"></script>
<script src="js/libs/backbone/backbone.js" type="text/javascript"></script>
<script src="js/libs/mustache/mustache.js" type="text/javascript"></script>
<script src="js/libs/sea.js" data-main="./js/init" type="text/javascript"></script>
</head>
<body>
<div id="container" class="container">
<div id="logo">
<h1>
Backbone Demo</h1>
</div>
<div id="menu">
<ul>
<li><a href="#!/home">Index</a></li><li><a href="#!/pic#img1">Img1</a></li>
</ul>
</div>
<div id="page">
加載中……
</div>
<div id="footer" class="footer">
author:ygm
</div>
</div>
</body>
</html>
backbone重度依賴underscore庫，輕度依賴jquery，mustache一個模版js庫，
seajs加載好后根據data-main加載init.js文件
init.js
seajs.config({
alias: {
js: '/backbone/js',
tmpl: '/backbone/templates'
},
preload: ['plugin-text']
});
define(function(require, exports, module) {
$(function() {
var Router = require('./router');
Router.initialize();
});
});
這里沒有用require('xxx')這種形式來加載相應jquery,backbone等庫是因為要改造源碼，用define包裝起來,所以我直接引用了...
init.js中加載了router.js,並初始化...
router.js
define(function(require, exports, module) {
var AppRouter = Backbone.Router.extend({//創建一個路由類
baseUrl: './views/',
initialize: function(options) {//路由加載不同視圖文件
this.route(/(.*)/, "defAction", function(path) {
require.async(this.baseUrl + 'home/index', function(view) {
view.render();//渲染文件
})
});
this.route(/^!\/(pic)#(\w+)/, "picAction", function(path, action) {
require.async(this.baseUrl + path + '/' + action, function(view) {
view.render();
})
});
}
});
var initialize = function() {
new AppRouter;
Backbone.history.start(); //當所有的 路由 創建並設置完畢，調用 Backbone.history.start() 開始監控 hashchange 事件並分配路由
}
return {
initialize: initialize
};
});
img1.js
define(function(require, exports, module) {
var img1Template = require('tmpl/pic/img1.htm'),//加載相應模版
picsCollection = require('js/collections/pics'),//加載集合
img1View = Backbone.View.extend({//創建視圖類
el: "#page",
initialize: function() {
this.collection = new picsCollection;
},
render: function() {
var data = { data: this.collection.toJSON() };//得到集合類的json數據
this.$el.html(Mustache.render(img1Template, data)); //Mustache模版渲染
},
events: {
"click img": "imgSay"//委托事件執行相應函數
},
imgSay: function(e) {
alert($(e.target).siblings().css("border-color", "#fff").end()
.css("border-color", "red").attr("info_data") || 'nothing');
}
});
return new img1View;
});
pics.js
define(function(require, exports, module) {
var picModel = require('../models/pic'),
picsCollection = Backbone.Collection.extend({
model: picModel,
initialize: function() {
for (var i = 1; i < 6; i++) {
this.add(new picModel({ info_data: 'I am Pic' + i, url: '/backbone/img/pic' + i + ".jpg" }));
}
}
});
return picsCollection;
});
demo結果圖
這個demo沒有詳細的講解，只是貼了主要代碼，演示的是如何整體應用backbone的Model，Collection，Router，View四個主要模塊..
細節功能可以查看官方api http://documentcloud.github.com/backbone/
中文api http://www.csser.com/tools/backbone/backbone.js.html（翻譯的是0.5.3版本）
http://documentcloud.github.com/backbone/docs/todos.html 一個todo的例子，用了本地存儲
http://backbonetutorials.com/ 一個入門的教程