Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Doing MVC with Baman.js
Search
Zhusee
February 27, 2014
Technology
0
160
Doing MVC with Baman.js
A very brief intro to Batman.js as a Javascript MVC framework. (Chinese-English mixed)
Zhusee
February 27, 2014
Tweet
Share
More Decks by Zhusee
See All by Zhusee
以 JavaScript 實作簡易 Audio Sprites
zhusee2
1
270
TubeNews.in @ WebConf Taiwan 2013
zhusee2
7
630
Other Decks in Technology
See All in Technology
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
0
330
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
820
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
540
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
440
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
240
サンドボックス技術でAI利活用を促進する
koh_naga
0
200
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
560
AI開発ツールCreateがAnythingになったよ
tendasato
0
130
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
200
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
210
20250913_JAWS_sysad_kobe
takuyay0ne
2
180
Android Audio: Beyond Winning On It
atsushieno
0
110
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
6.9k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Invisible Side of Design
smashingmag
301
51k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
KATA
mclloyd
32
14k
Into the Great Unknown - MozCon
thekraken
40
2k
Designing for humans not robots
tammielis
253
25k
Context Engineering - Making Every Token Count
addyosmani
2
41
Transcript
Doing MVC with Batman Zhusee http://about.me/zhusee
༧ഹߕϪɓৎ ደ์.7$
Why not Angular.js? 㽀䄷穯⸱榿⚩䉏⚩㈘Ⰸ
Image Curtesy: Nathan Leclaire http://goo.gl/2gdkhI
<ng-沒那麼好上手 ._./>
None
None
Why Batman? ✓ CoffeeScript = 什麼都可以繼承 ✓ 跟 Rails 很容易整合
(official gem) ✓ 語法邏輯跟 Rails 相似 (搭配上⼿手相對快) ✓ 很清楚什麼時候可以找 jQuery 進來搭配 ✓ iOS-like View 的概念很好⽤用
Batman + Rails Generator Script Data Autoload via Ajax Official
Gem for Integration
gem “batman-rails” $ rails g batman:app $ rails g batman:scaffold
todos 第一次安裝進 Rails 快速產生 Routing + Controller + Model + View
Routing distribution GET requests (text/html) Other requests json
Similar Syntax: Routing GET[index, new, edit, show] Nested Resources
Similar Syntax: Controller Model Query
Model Relationships
Model Methods Send PUT request via 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)! viewDidMoveToSuperview viewDidLoad ready viewWillAppear viewDidAppear Appending
Subview viewWillRemoveFromSuperview viewWillDisappear viewDidDisappear Removing Subview 8KGY䥥⑈ビ側ⓛ䛟⨉䡌橃⃫ ⛐⇆桬瘟䠉L3WGT[≧夶䛧&1/
Data Binding & Event Binding Bind to innerHTML Event Binding
Data Binding & Event Binding Keypaths
Keypath Lookup TodosController TodosIndexView Subview Subview Subview data-bind
Batman.View • Find DOM root for View with this.node •
Provide handlers for view event binding
Custom View and Inheritance Every View is a CoffeeScript class,
so you can inherit views by simply using extends
Using Subview: Markup FolderView ⋯ ⋯
Using Subview: Append FolderView ⋯ ⋯ ⋯ Will be appended
to superview’s node by default
Encapsulation with Views Event Binding Lookup methods from view to
controller
Keypath Lookup TodosController TodosIndexView Subview MyOwnView Subview data-event-click=“playMusic” playMusic: ->
Why Batman? ✓ CoffeeScript = 什麼都可以繼承 ✓ 跟 Rails 很容易整合
(official gem) ✓ 語法邏輯跟 Rails 相似 (搭配上⼿手相對快) ✓ 很清楚什麼時候可以找 jQuery 進來搭配 ✓ iOS-like View 的概念很好⽤用