An overview on the MV* pattern, Handlebars and resulting in Thorax.
From Backboneto ThoraxMV* with 100% JavaScriptPatrick Mulder
View Slide
http://www.flickr.com/photos/the_foz/6219860966/
MV*
MVC pattern�http://amix.dk/blog/post/19615user
ViewCollections/ModelsSubscribeUI EventsServerRESTfulDOMTemplatesPublishBackbone MV*�
Demo 1�MV* basics
Why Thorax ?
Handlebars�
Backbone + handlebars
Demo 2�Handlebars MVC editor
Thorax.HelperView�{{#collection movies}}{{#link "details/{{_key}}" expand-tokens=true}}{{title}}{{/link}}{{/collection}}
itemFilter: function (model) {if (active) {return model.get('genre') === active;}else {return true;}}Supports filtering�
Thorax.Layout�layout.setView( ... ){{layout-element}}
subviews�{{view header}}
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
|-js!|!|---libs!|-----backbone!|-----impress!|-----masonry!|-----jquery!|-----jquery-fileupload!|-----jquery-ui!|-----require!|-----underscore!|!|---modules!|!|!|-templates!|---dashboard!|---directory!|---shared!developmentproductionHTTPLoading JS Modules�
RequireJS�
BowerYeoman
And more, e.g. for testing�
„Chef‘s choice“�
Development API server�
BUILDPROCESS
Demo 3�workflow automation�
Root ViewThanks !
Let‘s discuss!http://github.com/mulderp/thorax_sandbox!http://thinkingonthinking.com!http://pipefishbook.com!!!@mulpat!