Handlebones

A talk on using Backbone together with Handlebars

Transcript

1. Handlebones
   Building an App with Handlebars
   and Backbone
   Patrick mulder
   @mulpat
   Munich Ember Meetup May 2014
   

   View Slide

2. Background
   render UI‘s with
   Key-Value Observation
   

   View Slide

3. Views
   State
   Updates
   Server
   Sync
   Changes
   UI Events
   DOM
   Templates
   MV*
   Keys Values
   Handlebars
   

   View Slide

4. Handlebars
   mvc_editor
   To be released at github, inspired by Andrei Kashcha
   

   View Slide

5. App Dependencies
   Scaffolding
   And project structure
   

   View Slide

6. Simple controls
   1 way data binding =
   Change in state -> re-render view
   

   View Slide

7. Advanced editing
   2 way data binding =
   •  Change in model -> change in view
   •  Change in input -> change model
   

   View Slide

8. Advanced Views
   •  Start with lists or longer inputs
   •  E.g. the colors
   

   View Slide

9. Nested views
   

   View Slide

10. References
    •  http://thinkingonthinking.com/two-way-databinding-
    with-stickit/
    •  http://thinkingonthinking.com/key-value-pairs/
    •  https://speakerdeck.com/mulderp/backbone-and-
    handlebars
    •  https://github.com/FormidableLabs/handlebones
    •  http://handlebarsjs.com/block_helpers.html
    

    View Slide