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
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.5k
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
23
17k
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
270
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
0
130
20250929_QaaS_vol20
mura_shin
0
110
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
210
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
3
300
非エンジニアのあなたもできる&もうやってる!コンテキストエンジニアリング
findy_eventslides
3
910
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
590
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
110
FastAPIの魔法をgRPC/Connect RPCへ
monotaro
PRO
1
750
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
190
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Embracing the Ebb and Flow
colly
88
4.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
A designer walks into a library…
pauljervisheath
209
24k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Code Review Best Practice
trishagee
72
19k
The Pragmatic Product Professional
lauravandoore
36
6.9k
We Have a Design System, Now What?
morganepeng
53
7.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Agile that works and the tools we love
rasmusluckow
331
21k
Building an army of robots
kneath
306
46k
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 的概念很好⽤用