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
Backbone and Handlebars
Search
mulderp
March 12, 2014
Programming
3
410
Backbone and Handlebars
A small overview on the MV* pattern with Backbone.js and Handlebars
mulderp
March 12, 2014
Tweet
Share
More Decks by mulderp
See All by mulderp
Node.js for Embedded Systems
mulderp
1
2.8k
Nodebotsday
mulderp
1
130
I2C basics with Arduino
mulderp
0
220
Sharing hardware with JavaScript
mulderp
1
210
Arduino October meetup
mulderp
0
120
Physical JavaScript with Johnny-5, Cylon and Tessel
mulderp
1
1.1k
Blogging and writing about JavaScript
mulderp
2
900
Minimum Viable Interactions
mulderp
3
620
Arduino July Meetup
mulderp
0
100
Other Decks in Programming
See All in Programming
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
190
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
370
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
240
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
380
為你自己學 Python - 冷知識篇
eddie
1
340
TDD 実践ミニトーク
contour_gara
1
280
Improving my own Ruby thereafter
sisshiki1969
1
150
Rancher と Terraform
fufuhu
2
200
Langfuseと歩む生成AI活用推進
licux
3
320
Laravel Boost 超入門
fire_arlo
2
180
Namespace and Its Future
tagomoris
6
690
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Balancing Empowerment & Direction
lara
3
610
Building Applications with DynamoDB
mza
96
6.6k
Code Reviewing Like a Champion
maltzj
525
40k
Visualization
eitanlees
147
16k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Documentation Writing (for coders)
carmenintech
73
5k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Code Review Best Practice
trishagee
70
19k
Transcript
Backbone and Handlebars Patrick Mulder @mulpat
library vs� frameworks�
what browsers� do� Coast by opera
pixels and� events� http://dribbble.com/shots/1043933-Listacular-UI?list=show&tag=todo_list
DOM vs� State�
DOM http://www.flickr.com/photos/sifter/245803295/ State http://www.flickr.com/photos/lcisa/4713485911/
Where change� happens�
MV*
basic� idea� http://amix.dk/blog/post/19615 user
Views State Updates Server Sync Changes UI Events DOM Templates
Backbone MV*� Keys Values
Demo time� http://www.flickr.com/photos/tronixstuff/5268597956/
http://pipefishbook.com/editor/ To be released at github, inspired by Andrei Kashcha
Better� rendering �
Backbone + handlebars
Handlebars� // simple attributes {{title}} // repitition {{#each movies}} <div>{{title}}</div>
{{/each}} // conditionals {{#if currentUser}} <div>{{ privateStuff }}</div> {{/if}} // customHelpers {{#renderStars 5}}
Demo time� http://www.flickr.com/photos/tronixstuff/5268597956/
Thorax�
Getting Started� <script src="./thorax-combined.js"></script> Results in Jquery, Underscore, Backbone, Handlebars
Hint:
CollectionView� {{#collection movies}} {{#link "details/{{_key}}" expand-tokens=true}} <li>{{title}}</li> {{/link}} {{/collection}} Also
supports filtering
Thorax.Layout� layout.setView( ... ) <div class=“container"> {{layout-element}} </div>
model lookup� someEvent: function(ev) { var target = $(ev.currentTarget); var
model = target.model(); // change model ... }
events� var listView = new Thorax.View({ el: "#movies", events: {
collection: { reset: function(ev) { // automatic bound } } } }
subviews� <div class="header"> {{view header}} </div>
itemFilter: function (model) { if (active) { return model.get('genre') ===
active; } else { return true; } } Supports filtering�
Demo time� http://www.flickr.com/photos/tronixstuff/5268597956/
Brewing� matters� http://www.flickr.com/photos/visitflanders/6328705484/
|-js! |! |---libs! |-----backbone! |-----impress! |-----masonry! |-----jquery! |-----jquery-fileupload! |-----jquery-ui! |-----require!
|-----underscore! |! |---modules! |! |! |-templates! |---dashboard! |---directory! |---shared! development production HTTP Loading JS Modules�
commonjs� � http://www.flickr.com/photos/0lhe/4450998512/
RequireJS�
Bower Yeoman
None
Demo time� http://www.flickr.com/photos/tronixstuff/5268597956/
Data Binding� http://www.flickr.com/photos/johnbostock/3356341586/
Backbone.Stickit�
Let‘s discuss mulderp@github mulpat@twitter thinkingonthinking.com