Best strategy to use HAML template with Backbone.js

Question

Im getting into Backbone.js to structure the javascript code for my project and I love HAML for templating on the backend(rails), so Id like to use it for Backbone Views templat

Answer 1

I can't answer inline on Craig's thread (I'm guessing I need some sort of reputation to post on existing answers), but you no longer need to grab a fork of jammit to use haml-js -- the commit made it into the main branch of jammit. See here for details: https://github.com/documentcloud/jammit/commit/b52e429f99cac3cd1aa2bf3ab95f1bfaf478d50d

EDIT: the last gem release was in Jan, and the commits were added in March, so you'll need to set up bundler to run against the github repo or build it locally. If you don't use HEAD of jammit you'll have trouble getting the templates to be parsed properly since the newlines are stripped.

All I needed to do to set this up is:

1) Add the following to my "assets.yml" file:

template_function: "Haml"

2) Add the haml-js source and templates I wanted to load to my assets file: javascripts: core: - public/javascripts/vendor/haml.js templates: - app/views/events/_form.haml.jst

3) Make sure I was loading both core and templates in my application.html.erb

<%= include_javascripts :core, :templates %>

4) Access templates in my source files via JST[filename] (ie, in this case JST['_form']). One gotcha worth mentioning -- jammit will look at all your templates and namespace them down to the common path, so if you have app/views/foo/file.jst and app/views/bar/file.jst, you'd access with JST['foo/file.jst'] and JST['bar/file.jst']. If you had app/views/foo/file1.jst and app/views/foo/file2.jst, they'd be directly at JST['file1.jst'] and JST['file2.jst'] -- which is easy to forget when you're starting out with your first few templates.

Everything worked quite nicely. I'm not sure why Craig needed to define a function -- I just used the default Haml function provided by haml.js, but maybe I'm missing something.

Answer 2

I know you already mentioned it but I would suggest using haml-js with Jammit. Simply include haml.js in your javascripts and in your assets.yml add template_function: Haml as well as including your template files in to a package. e.g.

  javascript_templates:
    - app/views/**/*.jst.haml

Then in your views you can include this package (= include_javascripts :javascript_templates) and Jammit will package any .jst.haml files in to window.JST['file/path']. (If you view page source you should see a javascript file like <script src="/assets/javascript_templates.jst" type="text/javascript"></script>)

To use these templates simply call one of those JSTs Jammit created. i.e.

$('div').html(JST['file/path']({ foo: 'Hello', bar: 'World' }));

And Jammit will use the Haml-js template function function to render the template.

Note: Be sure to point to the github repo of Jammit in your Gemfile to get the latest version that supports newline characters necessary for haml-js to work.