Using Mustache with Ruby on Rails

Mustache for Ruby on Rails[contact-form][contact-field label=”Name” type=”name” required=”true” /][contact-field label=”Email” type=”email” required=”true” /][contact-field label=”Website” type=”url” /][contact-field label=”Message” type=”textarea” /][/contact-form] is a framework to create logic-less HTML templates to better separate views from Logic. Mustache works by expanding tags using hash or object-delivered values. It is called logic-less because the templates do not use true/false, “ifs,” SETC statements, or clauses to use tags, and some of them are replaced by values, or by a series of values. The framework is mature and pretty easy to use. It works with more than Ruby. Source code, configuration files and more are available in various programming languages. And code displays well in most of the popular text editors/IDEs. In this post, I will show you how to get started with Mustache in a Ruby project.

Mustache Syntax

Tags are a key element in Mustache. They are indicated by double keys or mustaches {{tag}}. There are several types of tags that we can use with Mustache, which are: variables, sessions, list not empty, lambda, non-false values, inverted sessions, comments, and partial and set delimiter. These tag templates are more focused on commands and functions and less focused on the part of layout.

Adding Mustache to the Project

To run some tests on Mustache with Ruby on Rails, we will first apply it in a Ruby on Rails project. To create a Ruby on Rails project, run in the terminal:

$ rails new test-mustache

This command will create a new Rails project using the SQLite database that makes it even easier to do the test, which will look like this:

Now add the Mustache gem to the list of dependencies in the Gemfile:

gem "mustache", "~> 1.0"

Run the bundle installs to include the gem in your project and on your machine.

Add in the config/routes.rb file the line config root: to => ‘home # index’, and every time the browser accesses the project, it will be mapped to home/index. Then paste the command “rails g controller home index” into the terminal to create the files needed to use the controller in the project. The HomeController class will be created in the app/controllers/home_controller.rb path. You will also create the home folder in app/views and the index.html.erb HTML file.

Type in your rails server (s) (rails server) terminal to start the project and open in a new tab the address http://localhost:3000 to access your project.

Now let’s apply Mustache in the project. Open app/models in your project and create two new files with the extension .rb and another with .mustache. The names preferred in this case will be used test.rb and test.mustache. In the test.rb file, paste the following code:

class Test < Mustache
  self.template_path = __dir__

  def name
    "John"
  end

  def value
    50
  end

  def date
    20
  end
End

The line self.template_path = __dir__ defines that the Mustache template will be looking within the current directory, which is app/models.

In the test.mustache file, paste the code below:

Hi my friend {{name}}.
You just earned $ {{value}} on purchases!
Valid until the {{date}}. Congratulations!!!

Next, it is necessary to add a render that will call the Mustache template. Add it in the view app /views/home/index.html.erb, like this:

<%= Test.render %>

The render will cause the project to search for what's in .rb and .mustache, and then add inject it into the page. As soon as you finish, restart the Rails server, and access the project in the browser. You will see the message:

Hi, my friend John. You just earned $ 50 on purchases! Valid until the 20th. Congratulations !!!

Conclusion

Working with Mustache is a not-so-easy task because documentation is sparse. But even more difficult is finding where you need to place each item in the Rails project, since the documentation that exists is not very clear. Mustache does not offer a graphical application on its variables, but we can use HTML Help. So when you add the render, write the html_safe method call at the end. It will look like <% = Test.render.html_safe%>. Now, when you apply something different as bold, put the mustache tag inside the desired HTML tag: {{name}} . And this will be printed like this: