因爲最近都在看《JavaScript快速全棧開發》,所以有些源代碼可能就是從中摘抄下來的哦~
這是編寫的第一個Backbone.js應用,感覺網絡上這方面有些少,作爲小白,在此寫下自己在書籍和網絡上查找出的步驟歸納一下,以便以後的學習和大家的分享交流。
具體步驟:
(1)下載以下庫文件,並且引入進等會新建的html文件裏面:(具體版本沒有深入考慮過,我下載的是jquery-2.0.0、underscore-1.8.3、backbone-1.3.3)
JQuery:http://www.jq22.com/jquery-info122
Underscore.js:http://www.oschina.net/p/underscore_js/?fromerr=TWMobQ2j
Backbone.js:http://www.oschina.net/p/backbone/?fromerr=Zha8WAhT
(2)再在新建的html裏面新建一個<script/>標籤添加一段Backbone.js Router。
<script>
var app;
//定義一個叫firstbackbone的路由。
/*
用通俗的說法就是新建了一個類,並且繼承自Backbone.Router,
但javascript並不存在實際意義上的類,僅僅只是通過某些技巧達到類的效果
*/
var router = Backbone.Router.extend({
routes: {
'': 'firstbackbone'
},
//初始化對象時執行,現在暫時沒用
initialize: function(){
},
//與上面創建的名字保存一致
//添加創建和渲染 View 的邏輯。View()傳給View、render()傳給render()
firstbackbone: function(){
this.homeView = new homeView;
this.homeView.render();
}
});
var homeView = Backbone.View.extend({
//el是從視圖的tagName、className或者id等屬性中創建的元素,沒有這些值el就是空div
//el 是一個保存 jQuery 選擇器的字符串,也可以使用'.'作爲類和'#'作爲ID名
el: 'body',
//template屬性被賦值給傳入值的Underscore.js 函數template 運行的結果
template: _.template('Hello First Bockbone.js'),
//視圖需要重繪便會調render方法
render: function(){
this.$el.html(this.template({}));
}
});
//調用了 Backbone.history.start 方法,這個方法可以讓我們在點擊後退或者前進的時候同樣會觸發路由的事件
$(document).ready(function(){
//實例化Router
app = new router;
// 打開 Backbone 的歷史記錄
Backbone.history.start();
})
</script>
(3)最後在body裏面定義一個空的<div/>,運行html文件即可
具體效果是在網頁中輸出Hello First Bockbone.js
(4)源代碼免費提供給大家,希望大家一起交流學習。感謝。http://download.csdn.net/detail/miss_ll/9698695