Hamlbars is a Ruby gem which allows you to easily generate Handlebars templates using Haml.
For an alternative to Hamlbars, also check out Emblem, if you are using Ember.
Add the following line to your Gemfile (on Rails, inside the :assets
group):
gem 'hamlbars', '~> 2.0'
As of version 2.0 Hamlbars simply outputs raw Handlebars templates, and you will need to use the precompiler of your choice to compile the assets for your usage.
If you're using Ember.js then you will need the ember-rails gem. If you're just using Handlebars templates on their own then you need to use handlebars_assets to precompile for your framework.
Be sure to take a look at Hamlbars' sister project FlavourSaver for pure-ruby server-side rendering of Handlebars templates.
When using the handlebars_assets
or ember-rails
gems you need to add an
extra file extension so that the asset pipeline knows to take the output of
Hamlbars and send it into the template compiler of your choice. Luckily
both gems register the hbs
extension, so you can enable asset compilation
by setting .js.hbs.hamlbars
as the file extension for your templates.
If you're unsure how all the pieces fit together then take a quick look at the demo site.
Hamlbars adds a couple of extensions to Haml in order to allow you to create handlebars expressions in your templates.
You can use the handlebars
helper (or just hb
for short) to generate both
Handlebars blocks and expressions.
Generating Handlebars expressions is as simple as using the handlebars
helper
and providing the expression as a string argument:
= hb 'App.widgetController.title'
which will will generate:
Whereas passing a block to the handlebars
helper will create a Handlebars
block expression:
%ul.authors
= hb 'each authors' do
%li<
= succeed ',' do
= hb 'lastName'
= hb 'firstName'
will result in the following markup:
The hb
helper can take an optional hash of options which will be rendered
inside the expression:
= hb 'view App.InfoView', :tagName => 'span'
will result in:
You can use the handlebars!
or hb!
variant of the handlebars
helper to
output "tripple-stash" expressions within which Handlebars does not escape the
output.
Unfortunately, (or fortunately) due to the nature of Haml, we can't put Handlebars expressions in a tag definition, eg:
But we can allow you to put Handlebars expressions in to generate tag arguments by
adding a special hb
attribute to your tags. For example:
%div{:hb => 'idHelper'}
Which would render the following:
If you need to place more than one expression inside your tag then you can pass an array of expressions.
A large portion of the audience for Hamlbars is using it to generate templates for sites using the Ember.js javascript framework. We have added some special extra syntax to cater for Ember's common idioms.
You can easily add attribute bindings by adding a :bind
hash to the tag
attributes, like so:
%div{ :class => 'widget', :bind => { :title => 'App.widgetController.title' }
Which will generate the following output:
To use Ember's {{action}}
helper, set the :_action
attribute, like so:
%a{ :_action => 'toggle' } Toggle
%a{ :_action => 'edit article on="doubleClick"' } Edit
This will generate:
<a {{action toggle}}>Toggle</a>
<a {{action edit article on="doubleClick"}}>Edit</a>
Note that :_action
has a leading underscore, to distinguish it from regular
HTML attributes (<form action="...">
).
You can enable support by calling Hamlbars::Template.enable_rails_helpers!
.
Probably the best way to do this is to create an initializer. This is
dangerous and possibly stupid as a large number of Rails' helpers require
access to the request object, which is not present when compiling assets.
That said, it can be pretty handy to have access to the route helpers.
Use at your own risk. You have been warned.
Hamlbars is Copyright © 2012 Sociable Limited and licensed under the terms of the MIT License.