Introducing jQuery Simple Templates

September 3, 2008, 9:03 pm · 6 comments · Filed under: JavaScript, jQuery, Web Development

Overall, I love jQuery. One thing I have missed from my Prototype days was simple, built-in templating. Introducing jQuery Simple Templates.

Jump to article

I’ve been meaning to write a blog post about jQuery for a while. If you’re a web developer, you’d have to have been living under a rock for the past year not to have heard about it. jQuery is billed as the “write less, do more” JavaScript framework, and I have to say I agree.

Get Simple Templates

That said, one deficiency in jQuery has been nagging at me for a while. When I was doing a lot of work with Prototype, I made extensive use of the Template class. As the name implies, it is a way to create re-usable strings that can be merged with values to produce something useful.

Here’s an example of templates in Prototype:

var link = new Template('<a href="#{url}">#{label}</a>');
var values = {
   url : 'http://andrew.hedges.name',
   label : 'My Homepage'
};
// <a href="http://andrew.hedges.name">My Homepage</a>
alert(link.evaluate(values));

I wrote Simple Templates to work pretty much the same way. Here’s an example:

var link = '<a href="#{url}">#{label}</a>';
var values = {
   url : 'http://andrew.hedges.name',
   label : 'My Homepage'
};
// <a href="http://andrew.hedges.name">My Homepage</a>
alert($.tmpl(link, values));

I’m pretty happy to have an easy way to do templating in jQuery without having to learn a new syntax. Maybe the best thing about this plug-in, though, is the fact it weighs in at only 1009 bytes!

Bug reports and enhancement requests can be filed at the project home on Google Code.

Enjoy!

Short URL to this article:
Tweet this article!

6 comments

Andrew, I’ve only just started using templating and I’m on the lookout for something decent. Have you seen John Resig’s Micro-Templating? It’s not part of jQuery as far as I know but it’s pretty tight looking code.

http://ejohn.org/blog/javascript-micro-templating/

★ Posted by: Troy Forster · March 11, 2009, 2:07 am

I haven’t used John’s solution, but it does have some advantages over mine, especially caching. What I like about Simple Templates is the syntax (familiar to those of us who came to jQuery from Prototype) and the simplicity.

Truth be told, I often eschew the use of my own plug-in and use a pure JavaScript solution. This one has the advantage of being slightly more efficient because it pre-compiles the templates (to use the term loosely) and of more closely following the Prototype syntax.

★ Posted by: Andrew Hedges · March 11, 2009, 6:34 pm

Andrew, I’m using your template plugin and I found it very useful. Thanks for sharing ! I wonder if it would be possible to allow the plugin to handle objects having complex properties (ie. {name: john doe, address: {street: Franklin 78, city: New York}}. The plugin successfully renders the “name” property, but I couldn’t make it with properties like “street” or “city”. Any ideas ?

Thanks in advance !

★ Posted by: Fernando · June 12, 2009, 8:03 am

Hi Fernando,

This plug-in is intended for very simple use cases. For complex JSON structures, the best library I’ve seen (and the one I use on projects) is JSON Template. It’s very fast and has implementations in other languages (e.g., Python), so you can use the same data and templates potentially on both the client- and server-side.

★ Posted by: Andrew Hedges · June 12, 2009, 8:27 am

Thanks for your advice! I’ll give it a try :-)

★ Posted by: Fernando · June 12, 2009, 9:50 am

Andrew,

I’m going deeply on json-template as you suggested, but I cannot find a way to deal with the issue that I’ve mentioned in my previous post. Everything goes fine with properties at “1st level” (in {name: john doe, address: {street: Franklin 78, city: New York}} the plugin makes it with “name” property but cannot deal with the other properties. The lack of documentation and examples make it harder also. Do you know any way to deal with this kind of issue ?

Best regards.

★ Posted by: Fernando · June 13, 2009, 4:29 am

Comments close automatically after 90 days.
Still have something to say? Drop me a line!

Possibly related posts

• How-to recover from checksum mismatch errors in SVN January 25, 2009
• Dude. Mikeyy can’t even spell his own name. April 12, 2009
• Stupid WebKit Tricks July 19, 2009
• Animating your iPhone web application May 29, 2009
• Defeat comment spam? Yes we can! December 26, 2008

Home · Blog · Folio · Resume · Widgets · Coding experiments · The Kids Page · Contact