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
620
Other Decks in Technology
See All in Technology
事例で学ぶ!B2B SaaSにおけるSREの実践例/SRE for B2B SaaS: A Real-World Case Study
bitkey
1
340
推し書籍📚 / Books and a QA Engineer
ak1210
0
120
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
230
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1k
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
220
AWS CDK 開発を成功に導くトラブルシューティングガイド
wandora58
3
170
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
180
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
3
230
TableauLangchainとは何か?
cielo1985
1
150
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
3
1.1k
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
260
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
5
2.1k
Featured
See All Featured
Producing Creativity
orderedlist
PRO
346
40k
Embracing the Ebb and Flow
colly
86
4.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Balancing Empowerment & Direction
lara
1
440
Making Projects Easy
brettharned
116
6.3k
Documentation Writing (for coders)
carmenintech
72
4.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Why Our Code Smells
bkeepers
PRO
336
57k
How GitHub (no longer) Works
holman
314
140k
Automating Front-end Workflow
addyosmani
1370
200k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
RailsConf 2023
tenderlove
30
1.1k
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 的概念很好⽤用