Doing MVC with Baman.js

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

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-沒那麼好上手 ._./>
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 的概念很好⽤用