Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Backbone and Handlebars

5d75f8af878f069a3b5939894c2e57ab?s=47 mulderp
March 12, 2014

Backbone and Handlebars

A small overview on the MV* pattern with Backbone.js and Handlebars

5d75f8af878f069a3b5939894c2e57ab?s=128

mulderp

March 12, 2014
Tweet

Transcript

  1. Backbone and Handlebars Patrick Mulder @mulpat

  2. library vs� frameworks�

  3. what browsers� do� Coast by opera

  4. pixels and� events� http://dribbble.com/shots/1043933-Listacular-UI?list=show&tag=todo_list

  5. DOM vs� State�

  6. DOM http://www.flickr.com/photos/sifter/245803295/ State http://www.flickr.com/photos/lcisa/4713485911/

  7. Where change� happens�

  8. MV*

  9. basic� idea� http://amix.dk/blog/post/19615 user

  10. Views State Updates Server Sync Changes UI Events DOM Templates

    Backbone MV*� Keys Values
  11. Demo time� http://www.flickr.com/photos/tronixstuff/5268597956/

  12. http://pipefishbook.com/editor/ To be released at github, inspired by Andrei Kashcha

  13. Better� rendering �

  14. Backbone + handlebars

  15. Handlebars� // simple attributes {{title}} // repitition {{#each movies}} <div>{{title}}</div>

    {{/each}} // conditionals {{#if currentUser}} <div>{{ privateStuff }}</div> {{/if}} // customHelpers {{#renderStars 5}}
  16. Demo time� http://www.flickr.com/photos/tronixstuff/5268597956/

  17. Thorax�

  18. Getting Started� <script src="./thorax-combined.js"></script> Results in Jquery, Underscore, Backbone, Handlebars

    Hint:
  19. CollectionView� {{#collection movies}} {{#link "details/{{_key}}" expand-tokens=true}} <li>{{title}}</li> {{/link}} {{/collection}} Also

    supports filtering
  20. Thorax.Layout� layout.setView( ... ) <div class=“container"> {{layout-element}} </div>

  21. model lookup� someEvent: function(ev) { var target = $(ev.currentTarget); var

    model = target.model(); // change model ... }
  22. events� var listView = new Thorax.View({ el: "#movies", events: {

    collection: { reset: function(ev) { // automatic bound } } } }
  23. subviews� <div class="header"> {{view header}} </div>

  24. itemFilter: function (model) { if (active) { return model.get('genre') ===

    active; } else { return true; } } Supports filtering�
  25. Demo time� http://www.flickr.com/photos/tronixstuff/5268597956/

  26. Brewing� matters� http://www.flickr.com/photos/visitflanders/6328705484/

  27. |-js! |! |---libs! |-----backbone! |-----impress! |-----masonry! |-----jquery! |-----jquery-fileupload! |-----jquery-ui! |-----require!

    |-----underscore! |! |---modules! |! |! |-templates! |---dashboard! |---directory! |---shared! development production HTTP Loading JS Modules�
  28. commonjs� � http://www.flickr.com/photos/0lhe/4450998512/

  29. RequireJS�

  30. Bower Yeoman

  31. None
  32. Demo time� http://www.flickr.com/photos/tronixstuff/5268597956/

  33. Data Binding� http://www.flickr.com/photos/johnbostock/3356341586/

  34. Backbone.Stickit�

  35. Let‘s discuss mulderp@github mulpat@twitter thinkingonthinking.com