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'm about to give haml-coffee a shot. (no pun intended) I can't sing the praises of coffeescript enough; plus it's a default now in Rails 3.1. Now I can embed coffeescript within my favorite templating language, and pre-compile the lot.

Oh, the joy.. now to get it to work.

Answer 2

Check out Middleman. It includes haml, sass, coffee, slim, etc. It uses gems like rails does and has a lot of other awesome functionality.

http://middlemanapp.com/

They even have a custom extension for backbone, https://github.com/middleman/middleman-backbone

It also allows you to build it into static html, css, and js for super fast loading.

Answer 3

I know this would somewhat going around the question but here we go :)

I my rails app I use haml for all views on the backend. It is awesome. For some reasons (mainly i18n), I do not like to use templates on the client side. This is how I do it:

• create all your template in ruby haml and store them into script tag with a funky type (i use text/js-template). This will create prerendered html that you can play with with jquery and backbone.
• when you create your backbone views, load the stored template and append it to your document
• Render your view by altering the preexisting template

You deal only with html and jQuery is awesome for that. For some views that do not requires i18n, I use underscore templating because it's already there.

As for haml templating performance, it seems mustache and handlebars are faster.

Answer 4

Looks like https://github.com/netzpirat/haml_coffee_assets gives you what you want. (window.JST templates, written in HAML, with inline coffescript support)

Answer 5

I've been working on Rails 3/Backbone app and have taken a different approach after evaluating hamlbars, haml_assets, and playing around with haml-js.

These are all solid gems which offer solutions to the problem, each having a certain set of trade-offs. Haml-js, for instance, requires rendering templates client side (there's nothing wrong with this, it's simply a tradeoff). Hamlbars and haml_assets both plug into the asset pipeline but because they exist outside of the request object some helpers will not work. Both make some adjustments for this and include url helpers and ActionView helpers, but don't expect to have the same features as writing haml in a view.

My approach is somewhat bulky (I am planning on putting this into an engine) but it works well and easily replicable. It uses haml_assets when possible, but falls back on serving a template from a "templates" controller with a "show" action

• Put your views in the view/templates/ directory
• You can add a layout that renders this view into a JST function
• You can specify the show action to return "application/javascript" as its content type
• You have access to all helpers when writing templates
• You can add script tags for "/template/whatever" that will render the whatever template, or use route globbing for better organized views.

The benefit of this approach is that because your views are accessible from controllers, you have the option to render them as jst templates (via the templates controller) or via other controllers as partials. This would allow you to serve seo-friendly pages directly from url's (like /products/widgets/super-cool-widget) were users may get the cached templated /templates/widgets/super-cool-widget.

Answer 6

You could try Express with Jade (Haml-like templates). Express builds on Connect for routing static files. Jade is one of the faster template engines I've tried with Node.js

http://expressjs.com/