Using Handlebars JS with Ruby on Rails!
What is Handlebars.js?
Handlebars allows to build semantic templates. Handlebars is largely compatible with Mustache templates. In most cases it is possible to swap out Mustache with Handlebars and continue using your current templates.
Official Handlebars Docs: http://www.handlebarsjs.com
Live demo: http://tryhandlebarsjs.com/
Now lets get started!
Prerequisites
Before you get started, make sure you have RVM, Ruby and Rails installed on your machine. If you don’t, please follow the instructions here: How To Install Ruby on Rails on Ubuntu.
Below version of Ruby and Rails were used in this tutorial
Rails 5.0.2
Ruby 2.2.3
You can find the full source code of this tutorial handlebar-rails.
Start by creating brand new rails app.
$ rails new handlebar-rails
Add bootstrap gem to apply some styling to your pages. Of course this is optional!
Lets create the API for the books model which we will use in this tutorial.
$ rails g scaffold Book name price:integer author — skip-template-engine
Adding — skip-template-engine
will create API without html views.
As we would use books routes as an API only, we set default format as JSON in config/routes.rb
file of our app. Doing so will send all the request as JSON.
resources :books, defaults: {format: :json}
Now lets add handlebars gem to our Gemfile
.
gem 'handlebars_assets'
and then do $ bundle install
so it gets installed in the rails app.
As we are working with semantic JS templates they need to be organized in assets/javascripts
folder.
Create directory named templates
in the assets/javascripts
folder as suggested in the official documentation of the handlebars gem. So it will have the below structure.
assets/javascripts/templates
Now add following to your application.js
manifest file.
//= require handlebars
//= require_tree ./templates
Note: Make sure you keep it before //= require_tree .
else you will be running into major problems.
Now lets add our first Handlebars template book_list.hbs
to our app.
One new thing that you will notice here is {{}}
block, anything written in this block is considered as dynamic code and will be evaluated by handlebars at run-time. It is similar to the code written as "#{a+b}"
which is termed as string interpolation in ruby.
Here all the code written between {{#books}} … {{/books}}
is looped on the books
object. Handlebars provide some built-in helpers so we will use them right out of the box.
{{#books}}
<td>{{name}}</td>
<td>{{price}}</td>
<td>{{author}}</td>
{{/books}}
Above will treat name
as book.name
as it is looped within books object loop. Same applies to price
and author
.
Any handlebar templates can be invoked using
HandlebarsTemplates[<template_name>](context)
As for example,
HandlebarsTemplates['book_list']({ books: data })
Here it searches assets/javascripts/templates/book_list.hbs
template and pass contents of data
asbooks
object to the template.
You can also check html output of the same in console of your web browser. That’s pretty cool!
In our rails app, on the home page load below AJAX call gets fired.
This call gets all the data of books in JSON format and pass it as context to book_list
handlebars template. The html will be generated based on the data passed is stored in bookListHtml
variable.Then it finds the div with the id named book-list
and replace the html with newly generated handlebar html template.
So handlebars makes it easy to generate views with JavaScript only. Add, edit and delete functionality has been also implemented using handlebars templates, you can find the source code at handlebar-rails. See below to have a look at what is implemented!
Handlebars also support haml and slim templates do explore it!
That’s it! Thanks for reading. If you liked it, press the lovely clap button :)