jquery-tmpl-rails: jQuery Templates for the Rails asset pipeline

There are myriad of JavaScript templating libraries available. The one officially adopted by jQuery is the jQuery Templates plugin. I have released jquery-tmpl-rails, a gem which adds the plugin and a corresponding Sprockets engine to the asset pipeline for Rails 3.1 applications.


Install it the usual way by adding it to your Gemfile:

gem "jquery-tmpl-rails"

Then run the bundle command from the shell.


Place individual jQuery templates in their own files with the .tmpl extension:

<!-- app/assets/javascripts/tmpl/author.tmpl -->
<div class="author">${name}</div>

In your manifest file, require the plugin followed by your individual templates. The templates are compiled and named with their Sprockets logical path:

//= require jquery-tmpl
//= require tmpl/author

$.tmpl("tmpl/author", { name: "Jimmy" }).appendTo("#author");

Feedback is appreciated! Happy templating!


Kristian Gerardsson Kristian Gerardsson commented
September 11, 2011

Awesome! I've been waiting for a solution to extract templates into separate files! Will try soon.

Johnny Hall Johnny Hall commented
September 12, 2011

Hi. Good work, an excellent idea.

I've just given it a quick whirl and came up against a couple of issues:

First, sprockets isn't finding the files. If I do this:

//= require tmpl/foo

Then it fails. If I do this:

//= require /tmpl/foo

The we're "good". I'm not sure why this is the case. I've had trouble with files in subfolders before now but haven't investigated much.

Then, when I do $.tmpl("tmpl/foo", json) the result is that it writes out the template name as text rather than actually applying the template. Odd.

I've just rolled back to my previous, on-demand loading solution for now.

Seen these issues before?

Jimmy Cuadra Jimmy Cuadra commented
September 12, 2011

@Johnny Hall

I have not seen the first issue, but the second issue happened to me while developing. I believe it was because the template was not being found and so no template was stored under that name. Could you open an issue on GitHub with the details of the problem?