Backbone.js學習記錄 Hello World!
使用Backbone,js 和 MVC 架構建立一個典型的Hello world專案。雖然是“殺雞用牛刀了”，畢竟是我第一次使用Backbone.js
依賴
jQuery 1.9.1
Undersore.js 1.5.0
Backbone.js
開始
<!doctype html> <html> <head> <meta charset="utf-8"> <title>backbone日常練習</title> </head> <body> <div></div> <script src="js/jquery.min.js"></script> <script src="js/Underscore.min.js"></script> <script src="js/backbone-min.js"></script> <script> // 開啟Backbone學習之旅 </script> </body> </html>
在 extend 呼叫裡設定指定的 routes 屬性:
var router = Backbone.Router.extend({
routes: {
' ': 'home'
}
});
Backbone中routes 屬性需要下面的格式： ‘path/:param’: 'action'，它實現了是當URl是 filename#path/param時， 觸發名為action 的函式（在Router 物件裡定義）。然後新增一個 home 路由：
var router = Backbone.Router.extend({ routes: { ' ': 'home' } });
現在我們需要新增一個 home 函式：
var router = Backbone.Router.extend({
routes: {
' ': 'home'
}
‘home’: function (){
// 渲染 HTML
}
});
新增建立和渲染 View 的邏輯。現在先定義 homeView:
var homeView = Backbone.View.extend({
});
然後給 homeView 新增屬性
var homeView = Backbone.View.extend({ el: 'body', teplate: _.template('Hello world!') });
el 是一個儲存 jQuery 選擇器的字串，也可以使用'.'作為類和'#'作為ID名。template屬性被賦值給傳入 Hello World 的 Underscore.js 函式 template 執行的結果。
渲染 homeView， 我們使用 this.$el， 這是一個 jQuery 物件，它指向 el 的屬性，使用 jQuery.html() 函式使用 this.template() 的結果替換 HTML。 下面是完整的 homeView 程式碼：
var homeView = Backbone.View.extend({
el: 'body',
template: _.template('Hello World'),
render: function (){
this.$el.html(this.template({}));
}
});
現在我們返回到 router，新增兩行到 home 函式：
var router = Backbone.Router.extend({
routes: {
'': 'home'
},
initialize: function (){
// 一些在物件初始化的時候執行的程式碼
},
home: function (){
this.homeView = new homeView;
this.homeView.render();
}
});
第一行建立了一個 homeView 物件並且賦值給 router 的 homeView 屬性。第二行呼叫 homeView 物件的 render() 方法，觸發 Hello World! 輸出。
最後，啟動整體 Backbone 應用，為了保證 Dom 完全載入， 用 $(function (){}) 包裝器呼叫 new router：
var app;
$(function (){
app = new router;
Backbone.history.start();
});
完整DEMO
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>backbone日常練習</title>
</head>
<body>
<div></div>
<script src="js/jquery.min.js"></script>
<script src="js/Underscore.min.js"></script>
<script src="js/backbone-min.js"></script>
<script>
var app;
var router = Backbone.Router.extend({
routes: {
'': 'home'
},
initialize: function (){
// 一些在物件初始化的時候執行的程式碼
},
home: function (){
this.homeView = new homeView;
this.homeView.render();
}
});
var homeView = Backbone.View.extend({
el: 'body',
template: _.template('Hello World'),
render: function (){
this.$el.html(this.template({}));
}
});
$(function (){
app = new router;
Backbone.history.start();
});
</script>
</body>
</html>