Doing MVC with Baman.js

373ac4ca568f8615e780f3208b1544a0?s=47 Zhusee
February 27, 2014

Doing MVC with Baman.js

A very brief intro to Batman.js as a Javascript MVC framework. (Chinese-English mixed)

373ac4ca568f8615e780f3208b1544a0?s=128

Zhusee

February 27, 2014
Tweet

Transcript

  1. Doing MVC with Batman Zhusee http://about.me/zhusee

  2. ༧ഹߕϪɓৎ ደ์.7$

  3. Why not Angular.js? 㽀䄷穯⸱榿⚩䉏⚩㈘Ⰸ

  4. Image Curtesy: Nathan Leclaire http://goo.gl/2gdkhI

  5. <ng-沒那麼好上手 ._./>

  6. None
  7. None
  8. Why Batman? ✓ CoffeeScript = 什麼都可以繼承 ✓ 跟 Rails 很容易整合

    (official gem) ✓ 語法邏輯跟 Rails 相似 (搭配上⼿手相對快) ✓ 很清楚什麼時候可以找 jQuery 進來搭配 ✓ iOS-like View 的概念很好⽤用
  9. Batman + Rails Generator Script Data Autoload via Ajax Official

    Gem for Integration
  10. gem “batman-rails”
 $ rails g batman:app $ rails g batman:scaffold

    todos 第一次安裝進 Rails 快速產生 Routing + Controller + Model + View
  11. Routing distribution GET requests
 (text/html) Other requests json

  12. Similar Syntax: Routing GET[index, new, edit, show] Nested Resources

  13. Similar Syntax: Controller Model Query

  14. Model Relationships

  15. Model Methods Send PUT request via Ajax on save()

  16. Batman.View • iOS-like View Lifecycle • Easy to work with

    jQuery • 2-Way Data-Binding • Appending Subviews and DOM • View class Inheritance • Encapsulation with custom Views
  17. View Lifecycle (as events)! viewDidMoveToSuperview viewDidLoad ready viewWillAppear viewDidAppear Appending

    Subview viewWillRemoveFromSuperview viewWillDisappear viewDidDisappear Removing Subview 8KGY䥥⑈⺚ビ側ⓛ䛟⨉䡌橃⃫ ⛐⇆桬瘟䠉L3WGT[≧夶䛧&1/
  18. Data Binding & Event Binding Bind to innerHTML Event Binding

  19. Data Binding & Event Binding Keypaths

  20. Keypath Lookup TodosController TodosIndexView Subview Subview Subview data-bind

  21. Batman.View • Find DOM root for View with this.node •

    Provide handlers for view event binding
  22. Custom View and Inheritance Every View is a CoffeeScript class,

    so you can inherit views by simply using extends
  23. Using Subview: Markup FolderView ⋯ ⋯

  24. Using Subview: Append FolderView ⋯ ⋯ ⋯ Will be appended

    to superview’s node by default
  25. Encapsulation with Views Event Binding Lookup methods from view to

    controller
  26. Keypath Lookup TodosController TodosIndexView Subview MyOwnView Subview data-event-click=“playMusic” playMusic: ->

  27. Why Batman? ✓ CoffeeScript = 什麼都可以繼承 ✓ 跟 Rails 很容易整合

    (official gem) ✓ 語法邏輯跟 Rails 相似 (搭配上⼿手相對快) ✓ 很清楚什麼時候可以找 jQuery 進來搭配 ✓ iOS-like View 的概念很好⽤用