A shot at templating

So what we’ve done in the previous chapter is awesome already, but what if we’d like a little dash of templating? Surely you have a couple more minutes, right?

The idea behind Brunch’s approach to templating is simple:

• Templates live in their own files, cleanly separated from JS or static HTML;
• These files get precompiled by whatever engine handles the template syntax, to produce a ready-to-use JS function: you pass it an object holding whatever dynamic data the template needs (what’s usually called a presenter or view model), and it spews out HTML;
• This function is wrapped as a module, as usual: it’s the module’s default export.

This avoids littering your JS with template code, as is too often seen with big fat String literals, and also avoids littering your HTML with hackish <script type="text/handlebars"> blocks, which always looked godawful to me. Sure, that leaves JSX, but even there we’ll have tricks to clean things up…

From a code editor standpoint, having separate files also means we usually get better syntax highlighting.

We’re going to use Jade because, well, Jade is very nice. If you already do a lot of Ember, you might want to check out Emblem too, that ties Ember and Jade-style code nicely together.

Let’s start by installing the plugin:

npm install --save-dev jade-brunch

Now let’s tell Brunch to add the resulting modules in our app’s JS build, with a new line at the end of our brunch-config.coffeefile:

module.exports = config:
  files:
    javascripts: joinTo:
      'libraries.js': /^bower_components/
      'app.js': /^app/
    stylesheets: joinTo: 'app.css'
    templates: joinTo: 'app.js'

We can then add our template file, perhaps in app/views/list.jade:

h2 Things to do:

ul#mainTodo.tasks
  each item in items
    li= item

All set! Using it inside our application.js is straightforward:

"use strict";

var App = {
  items: ['Learn Brunch', 'Apply to my projects', '…', 'Profit!'],

  init: function init() {
    var tmpl = require('views/list');
    var html = tmpl({ items: App.items });
    $('body').append(html);
  }
};

module.exports = App;

Rebuild, open your public/index.html file, and then…

How cool is that?!