mustache

Shared Mustache Templates for Rails 3

| 15 Comments

Hello my dear friends. Today we will talk about how we share mustache templates in Rails 3.

Let’s imagine that we have a task, where on first load of the page we show only 10 products. But when user scroll, we should automatically load more products on page (aka continuous pagination). Of course, this task can be solved in several ways, but I want solve this task by sharing one template between Rails and JavaScript.

There are many JavaScripts templates exists today – Hogan.js, Handlebars, Mustache etc. I choose Mustache, because it’s simple and has template engine implemented on many languages (we need JavaScript and Ruby). We created a gem for such type of tasks – smt_rails. How it works?

First of all you have to add this gem to your Gemfile and start ‘bundle install’:

Next launch generator:

That’s all.

Now you can create a directory in ‘app/templates’ mustache templates (these templates ends with ‘.mustache’ by default). Let’s create partial for the product:

File: ‘app/templates/products/_product.mustache

Content:

You can render this partial in ActiveView:

And in JavaScript:

So in the end you’ll have only one template, which is shared between Rails and JavaScript.

Demo application with scroll pagination you can find here

Source code: https://github.com/le0pard/st_rails_example

That’s all folks!

SMT_rails (Shared Mustache Templates for Rails)

Rubygems: https://rubygems.org/gems/smt_rails

Source code: https://github.com/railsware/smt_rails

Share
* Railsware is a premium software development consulting company, focused on delivering great web and mobile applications. Learn more about us.
  • http://twitter.com/tubbo Tom

    Does this also work with Handlebars templates?

    • Alexey Vasiliev

      No, only with Mustache. For Handlebars need engine written on Ruby, because without it we can render Handlebars templates by therubyracer or execjs gems, what slower for backend, than exec Ruby. I don’t know how this fork good for this:

      https://github.com/MSch/handlebars-ruby
      https://github.com/benatkin/handlebars-ruby

      • thefingz

        For handlebars integration with ruby apps this one is highly recommended (from author of therubyracer): https://github.com/cowboyd/handlebars.rb

        Note: this is not a port, ruby code actually binds to the template!

        • Alexey Vasiliev

          Ok, I will look on this solution. Maybe for handlebars we will create another gem. One big disadvantage – “therubyracer” only need for compiling assets on productions, but in this case it also need for backend – rendering the templates.

  • Pingback: Ruby NoName Podcast S04E08 | | CopyBase.RU - Интересное из сетиCopyBase.RU — Интересное из сети

  • wdiechmann

    great post Alexey!

    LinkedIn recently blogged about Dust.js as their preferred templating “framework” – but now I understand that their mobile dev-team hit a couple of snags forcing them in the arms of Backbone and underscore.

    Any ideas how your smt_rails will fare with Backbone and underscore?

    • AlexeyVasiliev

      Very good. 

      But http://documentcloud.github.com/underscore/#template you should replace to SMT templates. Whats all, what you need to do. Of cource, also you need rewrite exists underscore templates to mustache templates syntax and put it in app/templates folders.

      Example of backbone view with SMT:

      class Laggar.Views.ServerLi extends Backbone.View 

      tagName: “li”  

      className: “list”  

      template: SMT['servers/li']  

      render: =>

      $(@el).html(@template(@model))

  • Pingback: Ruby NoName Podcast S04E08 | crowler-pcworld

  • http://twitter.com/Denis_in_ua Denis Soloshenko

    Is it possible to precompile haml templates also? So I’ll use haml with mustache. 

  • Pingback: Shared Handlebars Templates for Rails 3 | Railsware Blog

  • Anita Graham

    This might be a stupid question but….

    when using the javascript side of smt where is the SMT object defined?

    I am happily using smt from Rails but now I want to use a template from js I get this:
          var content = SMT['photos/display'](Photo);

    ReferenceError: SMT is not defined

    • anonymous

      You need to put the following two lines at the start of application.js and not at the end. 
      Order matters sometimes. 
       //= require mustache
      //= require_tree ../../templates

    • http://www.facebook.com/manuel.kniep.3 Manuel Kniep

      I had the same issue when naming my template test.html.mustache for some reason SmtRails::Tilt#evaluate wasn’t called in this situation.

      simply renaming test.html.mustache to test.mustache helped

  • John

    I’m having problems displaying the mustache template.
    in my view i have

    =render partial: “dialogue_lines/dialogue_line”, formats: [:mustache], mustache: dialogue_line.as_json

    but in the browser, I see the unrendered variables. eg:

    This {{name}} has {{number}} of letters.

    If I do:

    =render “dialogue_lines/dialogue_line”, mustache: dialogue_line.as_json

    then it is ok, but I have a haml partial inside the views folder with the same name, that is why I have to specify the format.

Want to get more of Railsware blog?

RSS FEED

We're always ready to help!

CONTACT US