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

Handlebones

 Handlebones

A talk on using Backbone together with Handlebars

mulderp

May 14, 2014
Tweet

More Decks by mulderp

Other Decks in Programming

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