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

Backbone in Action

Backbone in Action

Slide for JavaScript.TW Group.

F830ec52d5bf72ee64fd1a43a6a82a49?s=128

大澤木小鐵

April 18, 2012
Tweet

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