Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
From Backbone to Thorax
mulderp
February 20, 2014
Programming
1
310
From Backbone to Thorax
An overview on the MV* pattern, Handlebars and resulting in Thorax.
mulderp
February 20, 2014
Tweet
Share
More Decks by mulderp
See All by mulderp
mulderp
1
2.7k
mulderp
1
70
mulderp
0
180
mulderp
1
130
mulderp
0
62
mulderp
1
1k
mulderp
2
560
mulderp
3
310
mulderp
0
74
Other Decks in Programming
See All in Programming
hiro_y
1
440
ajstarks
2
750
tarappo
4
390
mathetake
7
2.2k
shun_oshidari
6
2.8k
sysrich
0
240
joytomo
1
520
hyodol2513
2
1.1k
rukiadia
1
800
shiba6v
0
200
ykpythemind
0
130
o0h
PRO
0
280
Featured
See All Featured
sachag
445
36k
maltzj
502
36k
bermonpainter
343
26k
thoeni
3
650
frogandcode
128
20k
qrush
285
19k
tanoku
86
8.6k
roundedbygravity
84
7.9k
davidbonilla
70
3.6k
orderedlist
PRO
330
36k
keithpitt
402
20k
dougneiner
119
8k
Transcript
From Backbone to Thorax MV* with 100% JavaScript Patrick Mulder
http://www.flickr.com/photos/the_foz/6219860966/
None
MV*
MVC pattern� http://amix.dk/blog/post/19615 user
View Collections/Models Subscribe UI Events Server RESTful DOM Templates Publish
Backbone MV*�
Demo 1� MV* basics
None
Why Thorax ?
Handlebars�
Backbone + handlebars
Demo 2� Handlebars MVC editor
Thorax.HelperView� {{#collection movies}} {{#link "details/{{_key}}" expand-tokens=true}} <li>{{title}}</li> {{/link}} {{/collection}}
itemFilter: function (model) { if (active) { return model.get('genre') ===
active; } else { return true; } } Supports filtering�
Thorax.Layout� layout.setView( ... ) <div class=“container"> {{layout-element}} </div>
subviews� <div class="header"> {{view header}} </div>
events� var listView = new Thorax.View({ el: "#movies", events: {
collection: { 'all': function(ev) { console.log(ev) }, filter: function(ev) { } } } }
model binding� $(event.target).model();
Demo 3� Thorax fiddles
Fiddles� • Filtering collections: – http://jsfiddle.net/mulderp/Q4aMh/3/ • LayoutView: • http://jsfiddle.net/mulderp/e8RzY/
The Thorax Generator
None
|-js! |! |---libs! |-----backbone! |-----impress! |-----masonry! |-----jquery! |-----jquery-fileupload! |-----jquery-ui! |-----require!
|-----underscore! |! |---modules! |! |! |-templates! |---dashboard! |---directory! |---shared! development production HTTP Loading JS Modules�
RequireJS�
Bower Yeoman
None
And more, e.g. for testing�
„Chef‘s choice“�
Development API server�
BUILD PROCESS
Demo 3� workflow automation�
Root View Thanks !
Let‘s discuss ! http://github.com/mulderp/thorax_sandbox! http://thinkingonthinking.com! http://pipefishbook.com! ! ! @mulpat!