Rails Processing client-side / server-side using a single template (rudder or Mustache) using Sammy.js

Question

I searched the Internet for a while trying to find a textbook, but didn't have much luck.

From what I understand, Twitter uses one Mustache.js template in rails to render from the server when loading the first page, and then through its own ajax transition system (same as sammy.js).

I can get handlebars and sammy.js loaded on rails, but I can’t figure out how to separate one template file from the server (rails) and client side (sammy).

Answer 1

I personally have not created anything where I used the same server server and client side, but here is one way I can do this.

Say you have a partial image (_image.mustache):

<div class="image"> <a href="{{ view_url }}"> <img height="{{ height }}" width="{{ width }}" src="{{ src }}" /> </a> </div> 

When rendering your server page, you can simply use this as a regular partial and interpolate it for Mustache. You can then also display it in a script tag to use the Resig micro-template scheme .

 {{{image_js_template}}} 

In your mustache viewing class:

 def image_js_template content_tag :script, :type => "template", :id => "image-template" do render :text => self.partial('image') end end 

This should make the template uninterpreted (with {{else in the text). Now you can simply pick up this template in your Javascript by its identifier. In backbone.js you can do something like:

 class Views.AllImageList extends Backbone.View initialize: (options) -> @template = $('#image-template').html() 

I have not used Sammy.js, but it looks like he expects all of his templates to become public, which may cause a problem. However, you can still use the technique above and pass the jQuery render () and partial () objects directly (as indicated here ).

This is a basic idea, but you can probably do a lot to make it smoother. I would check the Jammit section on using templates , in particular, the part on using Mustache. In addition, ICanHaz.js has a way to simplify the use of client-side Mustache templates.