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
390
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
200
Arduino October meetup
mulderp
0
110
Physical JavaScript with Johnny-5, Cylon and Tessel
mulderp
1
1.1k
Blogging and writing about JavaScript
mulderp
2
890
Minimum Viable Interactions
mulderp
3
610
Arduino July Meetup
mulderp
0
98
Other Decks in Programming
See All in Programming
DevDay2025-OracleDatabase-kernel-addressing-history
oracle4engineer
PRO
7
1.6k
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
mizdra
PRO
3
2.4k
ユーザーにサブドメインの ECサイトを提供したい (あるいは) 2026年函館で一番熱くなるかもしれない言語の話
uvb_76
0
180
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
2.6k
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
110
「兵法」から見る質とスピード
ickx
0
200
Javaのルールをねじ曲げろ!禁断の操作とその代償から学ぶメタプログラミング入門 / A Guide to Metaprogramming: Lessons from Forbidden Techniques and Their Price
nrslib
1
290
External SecretsのさくらProvider初期実装を担当しています
logica0419
0
240
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
cuebic9bic
2
270
SpringBootにおけるオブザーバビリティのなにか
irof
1
890
Feature Flag 自動お掃除のための TypeScript プログラム変換
azrsh
PRO
4
630
TVer iOSチームの共通認識の作り方 - Findy Job LT iOSアプリ開発の裏側 開発組織が向き合う課題とこれから
techtver
PRO
0
710
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
25
2.8k
Building an army of robots
kneath
306
45k
Six Lessons from altMBA
skipperchong
28
3.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
850
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Faster Mobile Websites
deanohume
307
31k
A designer walks into a library…
pauljervisheath
205
24k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
What's in a price? How to price your products and services
michaelherold
245
12k
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