A very brief intro to Batman.js as a Javascript MVC framework. (Chinese-English mixed)
Doing MVC withBatmanZhuseehttp://about.me/zhusee
View Slide
༧ഹߕϪɓৎደ์.7$
Why not Angular.js?㽀䄷穯⸱榿⚩䉏⚩㈘Ⰸ
Image Curtesy: Nathan Leclaire http://goo.gl/2gdkhI
Why Batman?✓ CoffeeScript = 什麼都可以繼承✓ 跟 Rails 很容易整合 (official gem)✓ 語法邏輯跟 Rails 相似 (搭配上⼿手相對快)✓ 很清楚什麼時候可以找 jQuery 進來搭配✓ iOS-like View 的概念很好⽤用
Batman + RailsGeneratorScriptData Autoloadvia AjaxOfficial Gem forIntegration
gem “batman-rails” $ rails g batman:app$ rails g batman:scaffold todos第一次安裝進 Rails快速產生 Routing + Controller + Model + View
Routing distributionGET requests (text/html)Otherrequestsjson
Similar Syntax: RoutingGET[index, new, edit, show]Nested Resources
Similar Syntax: ControllerModel Query
Model Relationships
Model MethodsSend PUT requestvia Ajax on save()
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
View Lifecycle (as events)!viewDidMoveToSuperviewviewDidLoadreadyviewWillAppearviewDidAppearAppending SubviewviewWillRemoveFromSuperviewviewWillDisappearviewDidDisappearRemoving Subview8KGY䥥⑈ビ側ⓛ䛟⨉䡌橃⃫⛐⇆桬瘟䠉L3WGT[≧夶䛧&1/
Data Binding & Event BindingBind to innerHTMLEvent Binding
Data Binding & Event BindingKeypaths
Keypath LookupTodosControllerTodosIndexViewSubviewSubviewSubviewdata-bind
Batman.View• Find DOM root for View with this.node• Provide handlers for view event binding
Custom View and InheritanceEvery View is a CoffeeScript class, so you can inherit viewsby simply using extends
Using Subview: MarkupFolderView⋯⋯
Using Subview: AppendFolderView⋯⋯⋯Will be appended tosuperview’s nodeby default
Encapsulation with ViewsEvent BindingLookup methodsfrom viewto controller
Keypath LookupTodosControllerTodosIndexViewSubviewMyOwnViewSubviewdata-event-click=“playMusic”playMusic: ->