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
ユーザーの声とAI検証で進める、プロダクトディスカバリー
sansantech
PRO
1
140
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
2
620
ビズリーチ求職者検索におけるPLMとLLMの活用 / Search Engineering MEET UP_2-1
visional_engineering_and_design
1
120
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing Hiroshima 2025 Edition
tomzoh
0
140
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
1
160
HR Force における DWH の併用事例 ~ サービス基盤としての BigQuery / 分析基盤としての Snowflake ~@Cross Data Platforms Meetup #2「BigQueryと愉快な仲間たち」
ryo_suzuki
0
210
AWS IoT 超入門 2025
hattori
0
330
技育祭2025【秋】 企業ピッチ/登壇資料(高橋 悟生)
hacobu
PRO
0
100
OCI Network Firewall 概要
oracle4engineer
PRO
2
7.9k
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
9
4.6k
Node.js 2025: What's new and what's next
ruyadorno
0
250
Simplifying Cloud Native app testing across environments with Dapr and Microcks
salaboy
0
150
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Gamification - CAS2011
davidbonilla
81
5.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
The Cult of Friendly URLs
andyhume
79
6.6k
RailsConf 2023
tenderlove
30
1.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
KATA
mclloyd
32
15k
Optimizing for Happiness
mojombo
379
70k
Speed Design
sergeychernyshev
32
1.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
We Have a Design System, Now What?
morganepeng
53
7.8k
Code Review Best Practice
trishagee
72
19k
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 的概念很好⽤用