Hello my dear friends. Today we will talk about how we share mustache templates in Rails 3.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
There are many JavaScripts templates exists today – Hogan.js<\/a>, Handlebars<\/a>, Mustache<\/a> 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<\/a>. First of all you have to add this gem to your Gemfile and start ‘bundle install’:<\/p>\n\n\n\n Next launch generator:<\/p>\n\n\n\n That’s all.<\/p>\n\n\n\n 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:<\/p>\n\n\n\n File: ‘app\/templates\/products\/_product.mustache<\/p>\n\n\n\n Content:<\/p>\n\n\n\n You can render this partial in ActiveView:<\/p>\n\n\n\n And in JavaScript:<\/p>\n\n\n\n So in the end you’ll have only one template, which is shared between Rails and JavaScript.<\/p>\n\n\n\n Demo application with scroll pagination you can find here<\/a><\/p>\n\n\n\n Source code: https:\/\/github.com\/le0pard\/st_rails_example<\/a><\/p>\n\n\n\n That’s all folks!<\/p>\n\n\n\n SMT_rails (Shared Mustache Templates for Rails)<\/p>\n\n\n\n Rubygems: https:\/\/rubygems.org\/gems\/smt_rails<\/a><\/p>\n\n\n\n
How it works?<\/p>\n\n\n\ngem 'smt_rails', git: 'git:\/\/github.com\/railsware\/smt_rails.git'\n<\/pre>\n\n\n\n
rails g smt_rails:install\n<\/pre>\n\n\n\n
<a href=\"{{url}}\">{{title}}<\/a>\n<p>{{description}}<\/p>\n<\/pre>\n\n\n\n<%= render \"products\/product\", :mustache => product.as_json %> \n<\/pre>\n\n\n\n
var product = \u2026 ; come from ajax call as json\nvar content = SMT['products\/product'](product);\n<\/pre>\n\n\n\n