Backbone

Nesting Handlebars helpers into templates.

If you are building a lot of html templates using Handlebars then here is a walk through of slimming them down using Require.js, require handlebars plugin and Handlebars helper system.

A really good use case for this is building forms. Say you wanted to keep a common className and structure across all your app. You might start with a simple form like this one:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<form role="form">
  <fieldset>
    <div class="form-group">
      <label for="name" class="control-label">Name</label>
      <input class="form-control" type="text" id="name" />
    </div>
    <div class="form-group form-group--email">
      <label for="email" class="control-label">Email</label>
      <input class="form-control" type="email" id="email" />
    </div>
    <input type="submit" />
  </fieldset>
</form>

The first thing we could do would be to create reusable helpers which will build the label and input elements.

javascript backbone marionette templating handlebars