Rendering A Rails Partial As A jQuery Template

Posted by Derick Bailey on June 22, 2011

A question was asked on twitter:

Screen shot 2011 06 22 at 10 52 47 PM

Here’s one of the answers that I sent to rob, in the form of a gist:

<html>
  <head>
    <script id="some-template" type="x-jquery-tmpl">
      <%= render :partial => "some/partial", :locals => {:model => @template_model} %>
    </script>

    <script language="javascript" type="text/javascript">
      $("#some-template").tmpl({value: "this is some data"});
    </script>
  </head>
</html>

I’m using this solution in my current rails app and it’s a very elegant way to use an existing partial as a jQuery template. The only issue you have to solve, then, is how to get the “${value}” syntax populated into the rendered template fields. That, too, is simple.

Given this partial:

this is a partial. <%= model.value %>

I need to turn “<%= model.value %>” into “${value}” so that the jQuery template will populate the data. To do that, we provide an @template_model instance of our model, populated with the “${value}” values, from our controller.

class SomeController < ApplicationController
  def show
    @template_model = SomeModel.new(:value => "${value}")
  end
end

Easy-peasy. Our partial renders with the output of “this is a partial. ${value}” and when the jQuery template does its magic, it produces “this is a partial. this is some data” as the final result. From here, you can use jQueryUI’s dialog to open the rendered template as a dialog.

Related Articles:

Post Footer automatically generated by Add Post Footer Plugin for wordpress.

About Derick Bailey

Derick Bailey is a Developer Advocate for Kendo UI, a problem solver (and creator? :P ), software developer, screecaster, writer, blogger, speaker and technology leader in central Texas (north of Austin). He has been a professional software developer since the late 90's, and has been writing code since the late 80's. Find me on twitter: @derickbailey, @mutedsolutions, @backbonejsclass Find me on the web: WatchMeCode (screencasts), Kendo UI blog, MarionetteJS, My Github profile, On Google+.
This entry was posted in Javascript, JQuery, Rails. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • Anonymous

    What’s the advantage to this over sending the data as json array and keeping the template inline? I could see putting the template in one location and use the engine to render it in different places, is that what you’re trying achieve?

    • http://mutedsolutions.com Derick Bailey

      “it depends” :)

      the context was general, so i gave a general answer that could be manipulated into a specific context, easily. to specify any advantage / disadvantage, i’d have to know more about the situation. 

  • Anonymous

    I like this approach. With a little metaprogramming you can implement a model that responds to any arbitrary method with “${method_name}” and use it to convert templates.

    • http://mutedsolutions.com Derick Bailey

      that would be nice. i’ve been resorting to building my own .to_template_json methods for the objects that need it. the method returns a hash of the objects attributes, with ${attr} as the value. tedious, but works… a bit of meta-programming would certainly help a lot :)