Doing MVC with Baman.js

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 的概念很好⽤用