{"id":1795,"date":"2017-03-14T09:48:19","date_gmt":"2017-03-14T09:48:19","guid":{"rendered":"https:\/\/www.botreetechnologies.com\/blog\/?p=1795"},"modified":"2021-09-08T17:38:06","modified_gmt":"2021-09-08T12:08:06","slug":"using-handlebars-js-with-ruby-on-rails","status":"publish","type":"post","link":"https:\/\/www.botreetechnologies.com\/blog\/using-handlebars-js-with-ruby-on-rails\/","title":{"rendered":"Using Handlebars JS with Ruby on Rails!"},"content":{"rendered":"\n

What is Handlebars.js?<\/h2>\n\n\n\n
\"What<\/figure><\/div>\n\n\n\n

Handlebars<\/a> allows to build semantic templates. Handlebars is largely compatible with Mustache templates<\/a>. In most cases it is possible to swap out Mustache with Handlebars and continue using your current templates.<\/p>\n\n\n\n

Official Handlebars Docs:\u00a0http:\/\/www.handlebarsjs.com<\/a><\/p>

Live demo:\u00a0http:\/\/tryhandlebarsjs.com\/<\/a><\/p><\/blockquote>\n\n\n\n

Now let’s get started!<\/b><\/p>\n\n\n\n

Prerequisites<\/h3>\n\n\n\n

Before you get started, make sure you have\u00a0RVM<\/b><\/a>,\u00a0Ruby<\/b><\/a>\u00a0and\u00a0Rails<\/b><\/a>\u00a0installed on your machine. If you don’t, please follow the instructions here:\u00a0How To Install Ruby on Rails on Ubuntu<\/a>.<\/p>\n\n\n\n

Below version of Ruby and Rails<\/a> were used in this tutorial<\/p>\n\n\n\n

Rails 5.0.2
Ruby 2.2.3<\/p><\/blockquote>\n\n\n\n

You can find the full source code of this tutorial\u00a0handlebar-rails<\/b><\/a>.<\/p>\n\n\n\n

\"Let's
Let’s begin!<\/figcaption><\/figure>\n\n\n\n

Start by creating brand new rails app.<\/p>\n\n\n\n

$ rails new handlebar-rails<\/code><\/p><\/blockquote>\n\n\n\n

Add\u00a0bootstrap gem<\/b><\/a>\u00a0to apply some styling to your pages. Of course this is optional!<\/p>\n\n\n\n

Let’s create the API for the books model which we will use in this tutorial.<\/p>\n\n\n\n

$ rails g scaffold Book name price:integer author - skip-template-engine<\/code><\/p><\/blockquote>\n\n\n\n

Adding\u200a–skip-template-engine<\/b><\/i> will create API without html views.<\/p>\n\n\n\n

As we would use books routes as an API only, we set default format as JSON in config\/routes.rb<\/b><\/i> file of our app. Doing so will send all the request as JSON.<\/p>\n\n\n\n

resources :books, defaults: {format: :json}<\/code><\/p><\/blockquote>\n\n\n\n

Now let’s add handlebars<\/a> gem to our Gemfile<\/b><\/i>.<\/p>\n\n\n\n

gem 'handlebars_assets'<\/code><\/p><\/blockquote>\n\n\n\n

and then do $ bundle install<\/code><\/i><\/b> so it gets installed in the rails app.<\/p>\n\n\n\n

As we are working with semantic JS templates they need to be organized in assets\/javascripts<\/b><\/i> folder.<\/p>\n\n\n\n

Create directory named templates<\/b><\/i> in the assets\/javascripts<\/b><\/i> folder as suggested in the official documentation<\/a> of the handlebars gem. So it will have the below structure.<\/p>\n\n\n\n

assets\/javascripts\/templates<\/p><\/blockquote>\n\n\n\n

Now add following to your application.js<\/b><\/i> manifest file.<\/p>\n\n\n\n

\/\/= require handlebars
\n\/\/= require_tree .\/templates<\/code><\/p><\/blockquote>\n\n\n\n

Note: Make sure you keep it before \/\/= require_tree .<\/code><\/b><\/i> else you will be running into major problems.<\/p>\n\n\n\n

Now let’s add our first Handlebars template book_list.hbs<\/b><\/i> to our app.<\/p>\n\n\n\n