Backbone in Action

Backbone.js in Action 大澤木小鐵 @ JavaScript.TW Group

Backbone.js 簡介。 Backbone.js 開發基本要點。如何整合 RequireJS 。可能會出糗的 Live Demo
。 Agenda 不知道穿紅內褲會不會有保佑？

無法介紹詳細的 API 用法。 Live Demo 無法涵蓋所有 API 。例子可能有點無聊。預防針
http://speakerdeck.com/u/jaceju/p/head-first-backbonejs 講者另一個介紹 API 的 slide 網址

因為講者背骨為什麼用

輕巧壓縮後的檔案大小僅 5.6kb 。靈活不需用到所有 Backbone 類別。學習容易會
jQuery 就可以了。

Backbone 基本類別 Sync View Event History extend use Router Model
Collection

Model Router View URL Data Status DOM Template 關注點分離解耦很重要

類別行為 Event – 讓非 DOM 物件也能有自訂事件。 Model – 存取 Data
，可用 AJAX 或 LocalStorage 。 Collection – Model 的集合。 View – 接收輸入或更新 UI 。 Router – 控制網址，並處理 Model 與 View 的互動。

上路需知要先載入 underscore.js 。可以只用 Event 、 Model 或 View
。使用 View 時，要搭配 DOM Library 。資料同步不⼀一定要用 Database 。

基本流程定義 UI 及 Template 。定義 View 及事件。定義
Model 。定義 App Router 。整合所有類別。執行程式。

程式碼基本形式不見得是最好的做法要多看一些高手寫的範例

index.html <!DOCTYPE html> <html> <head> ... </head> <body> <script type="text/template"
id="view-template"> ... </script> <script src="lib/jquery/jquery-min.js"></script> <script src="lib/underscore/underscore-min.js"></script> <script src="lib/backbone/backbone-min.js"></script> <script src="lib/backbone/backbone.localStorage-min.js"></script> <script src="js/app.js"></script> </body> </html> 通常一個 template 會對應一個 View

Router var App = Backbone.Router.extend({ initialize: function () { },
routes: { '': 'home', 'hash1': 'action1', 'hash2/:id': 'action2' }, home: function () {}, action1: function () {}, action2: function (id) {} }); 記得要寫 routes ，這樣 Router 初始化時才會建立 Backbone.history 物件 http://documentcloud.github.com/backbone/#Router

Model var Model = Backbone.Model.extend({ defaults: { id: null, attr1:
'', attr2: '' }, validate: function(attrs) { if (attrs.attr1 === '') { return "'attr1' cannot be empty"; } if (attrs.attr2 === '') { return "'attr2' cannot be empty"; } } }); 驗證未通過時，會觸發 error 事件

Collection var Collection = Backbone.Collection.extend({ model: Model }); 注意 model
屬性是指向 Model 類別而不是 Model 物件

View var View = Backbone.View.extend({ template: _.template($('#view-template').html()), render: function ()
{ this.$el.html(this.template(this.model.toJSON())); return this; }, events: { 'click selector': 'callback' }, callback: function (e) { } }); 注意 template 屬性在這裡是一個 template engine

初始化 Collection var App = Backbone.Router.extend({ collection: null, initialize: function
() { this.collection = new Collection(); this.collection.fetch(); }, // ... initialize 方法只會在應用程式開始時執行一次所以初始化 collection 後的 fetch 方法也只會執行一次

整合 Model 與 View var App = Backbone.Router.extend({ // ...
action: function () { var model = new Model({ attr1: '', attr2: '', }); var view = new View({ model: model, collection: this.collection }); $('#container').empty().append(view.render().el); }, // ... 在 View 初始化時在 model 或 collection 屬性帶入對應的 model 或 collection 物件

執行 $(function () { new App(); Backbone.history.start(); }); 因為 View
有用到 DOM 元素所以要在 DOM Ready 後執行

RequireJS

index.html <!DOCTYPE html> <html> <head> ... <script data-main="js/main" src="lib/requirejs/require.js"></script> </head>
<body> ... </body> </html> data-main 所指向的 js 檔案就是我們主要的程式進入點

main.js require({ baseUrl: './', paths: { order: 'lib/requirejs/order', text: 'lib/requirejs/text'
}, }); require([ 'order!lib/jquery/jquery-min', 'order!lib/underscore/underscore-min', 'order!lib/backbone/backbone-min', 'order!bootstrap/js/bootstrap.min', 'order!js/app', ], function () { App = _.last(arguments); App.initialize(); }); 其他的 callback 參數是我們不需要的所以利用 arguments 取得最後一個參數

app.js define([ 'js/router/Router' ], function (Router) { return { initialize:
function () { var router = new Router; Backbone.history.start(); } } }); 注意 callback 回傳的是只包含一個 initialize 方法的物件

Router define([ 'js/model/Model', 'js/view/View', ], function (Model, View) { return
Backbone.Router.extend({ // ... }); }); Model 與 View 沒有載入順序的問題

Model & Collection define(function () { return Backbone.Model.extend({ // ...
}); }); define([ 'js/model/Model' ], function (Model) { return Backbone.Collection.extend({ model: Model }); }); Collection 一定會相依 Model

Main View & SubView define([ 'text!template/sub.html' ], function (view_template) {
return Backbone.View.extend({ // ... }); }); define([ 'js/view/SubView', 'text!template/main.html', ], function (SubView, view_template) { return Backbone.View.extend({ // ... }); }); 改用 text plugin 載入 template 就不用在 index.html 使用 script 來包覆 template 而且可以在最佳化時把 template 變成內建字串

Live Demo https://github.com/jaceju/backbone_in_action 完整範例的網址

Q & A 沒有最好的 MV* Framework 只有適合專案使用的 MV* Framework

Backbone in Action

Backbone in Action

大澤木小鐵

More Decks by 大澤木小鐵

Other Decks in Programming

Featured

Transcript

Backbone.js in Action 大澤木小鐵 @ JavaScript.TW Group

Backbone.js 簡介。 Backbone.js 開發基本要點。如何整合 RequireJS 。可能會出糗的 Live Demo

無法介紹詳細的 API 用法。 Live Demo 無法涵蓋所有 API 。例子可能有點無聊。預防針

因為講者背骨為什麼用

輕巧壓縮後的檔案大小僅 5.6kb 。靈活不需用到所有 Backbone 類別。學習容易會

Backbone 基本類別 Sync View Event History extend use Router Model

Model Router View URL Data Status DOM Template 關注點分離解耦很重要

類別行為 Event – 讓非 DOM 物件也能有自訂事件。 Model – 存取 Data

上路需知要先載入 underscore.js 。可以只用 Event 、 Model 或 View

基本流程定義 UI 及 Template 。定義 View 及事件。定義

程式碼基本形式不見得是最好的做法要多看一些高手寫的範例

index.html <!DOCTYPE html> <html> <head> ... </head> <body> <script type="text/template"

Router var App = Backbone.Router.extend({ initialize: function () { },

Model var Model = Backbone.Model.extend({ defaults: { id: null, attr1:

Collection var Collection = Backbone.Collection.extend({ model: Model }); 注意 model

View var View = Backbone.View.extend({ template: _.template($('#view-template').html()), render: function ()

初始化 Collection var App = Backbone.Router.extend({ collection: null, initialize: function

整合 Model 與 View var App = Backbone.Router.extend({ // ...

執行 $(function () { new App(); Backbone.history.start(); }); 因為 View

RequireJS

index.html <!DOCTYPE html> <html> <head> ... <script data-main="js/main" src="lib/requirejs/require.js"></script> </head>

main.js require({ baseUrl: './', paths: { order: 'lib/requirejs/order', text: 'lib/requirejs/text'

app.js define([ 'js/router/Router' ], function (Router) { return { initialize:

Router define([ 'js/model/Model', 'js/view/View', ], function (Model, View) { return

Model & Collection define(function () { return Backbone.Model.extend({ // ...

Main View & SubView define([ 'text!template/sub.html' ], function (view_template) {

Live Demo https://github.com/jaceju/backbone_in_action 完整範例的網址

Q & A 沒有最好的 MV* Framework 只有適合專案使用的 MV* Framework