andrew.hedges.name / blog
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.
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
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.
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 !
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.
Thanks for your advice! I’ll give it a try :-)
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.
Comments close automatically after 15 days.
Still have something to say? Drop me a line!
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