Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Backbone in Action

F830ec52d5bf72ee64fd1a43a6a82a49?s=47 大澤木小鐵
April 18, 2012
Programming
14
1.6k

Backbone in Action

Slide for JavaScript.TW Group.

F830ec52d5bf72ee64fd1a43a6a82a49?s=128

大澤木小鐵

April 18, 2012
Tweet

More Decks by 大澤木小鐵

See All by 大澤木小鐵
F830ec52d5bf72ee64fd1a43a6a82a49?s=48 jaceju
3
510
F830ec52d5bf72ee64fd1a43a6a82a49?s=48 jaceju
4
320
F830ec52d5bf72ee64fd1a43a6a82a49?s=48 jaceju
9
520
F830ec52d5bf72ee64fd1a43a6a82a49?s=48 jaceju
30
1.8k
F830ec52d5bf72ee64fd1a43a6a82a49?s=48 jaceju
0
300
F830ec52d5bf72ee64fd1a43a6a82a49?s=48 jaceju
2
860
F830ec52d5bf72ee64fd1a43a6a82a49?s=48 jaceju
5
330
F830ec52d5bf72ee64fd1a43a6a82a49?s=48 jaceju
20
2.7k
F830ec52d5bf72ee64fd1a43a6a82a49?s=48 jaceju
24
4.3k

Other Decks in Programming

See All in Programming
0881bf028854bea223770e6bfc0a4065?s=48 martin_lover
11
4.3k
44df43ecb9d8ae00cafee6b804db3fcd?s=48 kentatada
2
190
3cb4e761dbdb7aebd1ffd85f752e1e3e?s=48 sonatard
0
230
D8ca2261592f73dc422829e1e20feea0?s=48 tawamura1224
2
1k
Ea059a886741b21e8d1dd992129634f7?s=48 ytsuzaki
1
350
52c76fb01bb5d1908f91b0231a44a7b5?s=48 boriswilhelms
0
130
2594ac7ce91fd7d9a3ce71ca7cc2d0c0?s=48 d_date
1
120
7fc4cc5734eb20c7f9b9b5791be33661?s=48 taku_0728
4
1.6k
80a3a3857a55f154d23acb705eff72cc?s=48 star_zero
2
4k
Dd280d6d98be3c13dfa14d63dde92299?s=48 fuga0618
0
240
F21d69109b1c03921abf7d12f0fb6654?s=48 dscs
0
110
C69a66be00bc04081feb1674c9085ca2?s=48 n_makoto
2
250

Featured

See All Featured
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
31
1.8k
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
177
8.1k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
260
24k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
122
8.2k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
318
19k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
99
5.7k
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
273
32k
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
25
4.1k
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
37
4.9k
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
162
6.8k
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
25
930
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
85
8.2k

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