Marionette

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.

Inserting a model at correct index in Marionette.CollectionView appendHtml

I’ve been working a lot with Backbone Marionette recently. It’s a really powerful framework for Backbone.js.

Today I have been working on displaying a table of model values with the ability to add new items to the collection they are in. It made sense to use Marionette’s CollectionView to manage the individual views for each model. It also conveniently will watch the collection for any add events and append a new view in to the DOM.