jQuery templating engines [closed]

Question

I am looking for a template engine to use client side. I have been trying a few like jsRepeater and jQuery Templates. While they seem to work OK in FireFox they all seem to break down in IE7 when it comes down to rendering HTML tables.

I also took a look at MicrosoftAjaxTemplates.js (from http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766) but turns out that has the same problem.

Any advice on other templating engines to use?

Answer 1

This isn't jsquery specific, but here's a JS-based templating library released by google as open source:

http://code.google.com/p/google-jstemplate/

This allows using DOM elements as templates, and is re-entrant (in that the output of a template rendering is still a template that can be re-rendered with a different data model).

Answer 2

Check out Rick Strahl's post Client Templating with jQuery. He explores jTemplates, but then makes a better case for John Resig's micro-templating solution, even improving it some. Good comparisons, lots of samples.

Answer 3

Just did some research on this and I'll be using jquery-tmpl. Why?

1. It's written by John Resig.
2. It'll be maintained by the core jQuery team as an "official" plugin. EDIT: The jQuery team have deprecated this plugin.
3. It strikes a perfect balance between simplicity and functionality.
4. It has a very clean and well thought out syntax.
5. It HTML-encodes by default.
6. It's highly extensible.

More here: http://forum.jquery.com/topic/templating-syntax

Answer 4

John Resig has one that's he's posted on his blog. http://ejohn.org/blog/javascript-micro-templating/

Answer 5

I was using jtemplates jquery pluging but the performance was really bad. I switched to trimpath (http://code.google.com/p/trimpath/wiki/JavaScriptTemplates) which has much better performance. I haven't noticed any issues with IE7 or FF.

Answer 6

You may want to think a bit how you want to design your templates.

One issue with many of the listed template solutions (jQote, jquery-tmpl, jTemplates) is they require you to insert non-HTML in your HTML, which can be a pain to work with in HTML tools or in a development process with HTML designers. I personally don't like the feel of that approach, though it has its pros and cons.

There is another class of template approaches that use normal HTML, but allow you to indicate data bindings with element attributes, CSS classes, or external mappings.

Knockout is a good example of this approach, but I have not used it myself so I am leaving it to the votes to decide if others like it or not. At least until I have time to play with it more.

PURE listed as another answer is another example of this approach.

For reference you can also look at chain.js, but it doesn't seem to have been updated much since its original release. For more background on it see http://javascriptly.com/2008/08/a-better-javascript-template-engine/.