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
Why Backbone
Search
Up Chen
November 19, 2011
Programming
1
1.8k
Why Backbone
Why should we use backbone instead hard code by ourself.
Up Chen
November 19, 2011
Tweet
Share
More Decks by Up Chen
See All by Up Chen
工程師討生活工具介紹:做更快一點
wallat
9
1k
Other Decks in Programming
See All in Programming
Git Rebase
bkuhlmann
11
1.6k
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
230
OpenTelemetry のサービスという概念について
azukiazusa1
2
1.1k
Front-end application development, Symfony-style(s)
dunglas
2
1.9k
Semantic search with Django and pgvector
pauloxnet
0
230
Java 22 Overview
kishida
1
160
Code Reviews
bkuhlmann
4
870
Site Reliability Engineering for GMO
pyama86
6
860
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
39
17k
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
25
7.7k
puregoの活用例
aethiopicuschan
0
220
Hanami and htmx
bkuhlmann
0
190
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
Optimizing for Happiness
mojombo
369
69k
Done Done
chrislema
178
15k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
Typedesign – Prime Four
hannesfritz
36
2k
Making Projects Easy
brettharned
107
5.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
75
41k
Debugging Ruby Performance
tmm1
69
11k
The Mythical Team-Month
searls
214
42k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Transcript
Why Backbone.js
Up
www.coolpics.com.tw
What can Backbone solve ?
None
None
None
None
None
None
None
None
• Light MVC for front-end for client side • Focus
on the structure • No UI widgets • Model, View, Collection, and Router.
Model is a thing trace = { stock: ‘台積電’, status:
‘not-added’ };
Bind events on Model for everything Remove Reset Change
Bind events on Model for everything Remove Reset Change Even
bind to the variable changes change:stock
Original
Original After
View represents a model status: ‘not-added’ status: ‘added’ status: ‘loading’
updates itself
How to update itself ? Bind to model’s variables !!
stock: ‘台積電’, status: ‘not-added’ change:status
Set and forget
stock: ‘宏達電’, status: ‘not-added’ traceList.set({stock:’台積電’});
stock: ‘台積電’, status: ‘loading’ stock: ‘宏達電’, status: ‘not-added’ ajax
stock: ‘宏達電’, status: ‘not-added’ stock: ‘台積電’, status: ‘loading’
stock: ‘台積電’, status: ‘loading’ stock: ‘台積電’, status: ‘added’ stock: ‘宏達電’,
status: ‘not-added’ ajax
stock: ‘台積電’, status: ‘loading’ stock: ‘台積電’, status: ‘added’ stock: ‘宏達電’,
status: ‘not-added’
stock: ‘宏達電’, status: ‘not-added’ traceList.set({stock:’台積電’});
Set and forget traceList.set({stock:’台積電’});
None
Side Benefits
None
None
None
None
So ...
None
Thank You
Recommend starting point Official Todo example http://bit.ly/trqhlV PeepCode Backbone.js basic
http://bit.ly/vCcSNw
www.coolpics.com.tw