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
Browser
recruitengineers
PRO
8
2.2k
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
6
2.5k
ソフトウェア エンジニアとしての 姿勢と心構え
recruitengineers
PRO
27
13k
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
110
シークレット管理だけじゃない!HashiCorp Vault でデータ暗号化をしよう / Beyond Secret Management! Let's Encrypt Data with HashiCorp Vault
nnstt1
2
130
2025年になってもまだMySQLが好き
yoku0825
7
3.2k
生成AI時代のデータ基盤
shibuiwilliam
4
2.4k
kubellが考える戦略と実行を繋ぐ活用ファーストのデータ分析基盤
kubell_hr
0
130
ヘブンバーンズレッドのレンダリングパイプライン刷新
gree_tech
PRO
0
440
つくって納得、つかって実感! 大規模言語モデルことはじめ
recruitengineers
PRO
32
12k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
まだ間に合う! StrandsとBedrock AgentCoreでAIエージェント構築に入門しよう
minorun365
PRO
11
740
Featured
See All Featured
Music & Morning Musume
bryan
46
6.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
We Have a Design System, Now What?
morganepeng
53
7.8k
The Cult of Friendly URLs
andyhume
79
6.6k
Designing Experiences People Love
moore
142
24k
4 Signs Your Business is Dying
shpigford
184
22k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Building Adaptive Systems
keathley
43
2.7k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Practical Orchestrator
shlominoach
190
11k
Docker and Python
trallard
45
3.5k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
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 的概念很好⽤用