Backbone in Action

Slide for JavaScript.TW Group.

Transcript

1. Backbone.js in Action 大澤木小鐵 @ JavaScript.TW Group
2. Backbone.js 簡介。 Backbone.js 開發基本要點。 如何整合 RequireJS 。 可能會出糗的 Live Demo 。 Agenda 不知道穿紅內褲會不會有保佑？
3. 無法介紹詳細的 API 用法。 Live Demo 無法涵蓋所有 API 。 例子可能有點無聊。 預防針 http://speakerdeck.com/u/jaceju/p/head-first-backbonejs 講者另一個介紹 API 的 slide 網址
4. 因為講者背骨 為什麼用
5. 輕巧 壓縮後的檔案大小僅 5.6kb 。 靈活 不需用到所有 Backbone 類別。 學習容易 會 jQuery 就可以了。
6. Backbone 基本類別 Sync View Event History extend use Router Model Collection
7. Model Router View URL Data Status DOM Template 關注點分離 解耦很重要
8. 類別行為 Event – 讓非 DOM 物件也能有自訂事件。 Model – 存取 Data ，可用 AJAX 或 LocalStorage 。 Collection – Model 的集合。 View – 接收輸入或更新 UI 。 Router – 控制網址，並處理 Model 與 View 的互動。
9. 上路需知 要先載入 underscore.js 。 可以只用 Event 、 Model 或 View 。 使用 View 時，要搭配 DOM Library 。 資料同步不⼀一定要用 Database 。
10. 基本流程 定義 UI 及 Template 。 定義 View 及事件。 定義 Model 。 定義 App Router 。 整合所有類別。 執行程式。
11. 程式碼 基本形式 不見得是最好的做法 要多看一些高手寫的範例
12. 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
13. 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
14. 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 事件
15. Collection var Collection = Backbone.Collection.extend({ model: Model }); 注意 model 屬性是指向 Model 類別 而不是 Model 物件
16. 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
17. 初始化 Collection var App = Backbone.Router.extend({ collection: null, initialize: function () { this.collection = new Collection(); this.collection.fetch(); }, // ... initialize 方法只會在應用程式開始時執行一次 所以初始化 collection 後的 fetch 方法也只會執行一次
18. 整合 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 物件
19. 執行 $(function () { new App(); Backbone.history.start(); }); 因為 View 有用到 DOM 元素 所以要在 DOM Ready 後執行
20. RequireJS
21. index.html <!DOCTYPE html> <html> <head> ... <script data-main="js/main" src="lib/requirejs/require.js"></script> </head> <body> ... </body> </html> data-main 所指向的 js 檔案 就是我們主要的程式進入點
22. 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 取得最後一個參數
23. app.js define([ 'js/router/Router' ], function (Router) { return { initialize: function () { var router = new Router; Backbone.history.start(); } } }); 注意 callback 回傳的是 只包含一個 initialize 方法的物件
24. Router define([ 'js/model/Model', 'js/view/View', ], function (Model, View) { return Backbone.Router.extend({ // ... }); }); Model 與 View 沒有載入順序的問題
25. Model & Collection define(function () { return Backbone.Model.extend({ // ... }); }); define([ 'js/model/Model' ], function (Model) { return Backbone.Collection.extend({ model: Model }); }); Collection 一定會相依 Model
26. 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 變成內建字串
27. Live Demo https://github.com/jaceju/backbone_in_action 完整範例的網址
28. Q & A 沒有最好的 MV* Framework 只有適合專案使用的 MV* Framework