haml-js and jammit

Using haml-js and Jammit in a Rails app (with backbone.js)

Some time ago I submitted a small patch to Jammit to enable haml-js as a template language. Afterwards I have received several questions through github on how to use it. I hope this blog entry helps if you too have any trouble to set this up.

Aside from the haml-js stuff I also added some tips. You will need to read through the Jammit documentation to know how to set things up from zero.

[update] setting up Rails

In order to be able to use the patch you'll still need to use the gem through github instead of the official one. So add the following to your Gemfile: (thanks for pointing this out David Francisco)

gem "jammit", :git => 'git://github.com/documentcloud/jammit.git'
          

You should not use the fork I've made since I may delete it soon (the only purpose was to be able to create the patch, I certainly do not intend to keep it around).

Setting up Jammit: assets.yml

This is an example config/assets.yml file. You can also see how I organise my files here.

As you can see I have mixed the view files within app/views (and are thus like partials, which in fact, they are of course).

You can choose the template_extension. I think .jst.haml is perfect. I also follow Rails conventions and add an underscore as a prefix to the filenames.

You also need Haml as the template_function. The compiled file Jammit is going to deliver (and your Rails application will use) looks like this:

Of course you need to have the haml-js required to make things work. From here on you can get back to the Jammit documentation.

Using the templates with backbone.js

This is pretty straightforward:

UserView = Backbone.View.extend({
            template: JST["users/_show"],
            render: function() {
              $(this.el).append(this.template(this.model.attributes));
              this.addAll();
              return this;
            }
          })
          

blog comments powered by Disqus