jQuery templating engines

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?

I would check the very nice (but pre-beta) JSViews and JSRender, seem like a potential official JQuery/UI templating engine (at least this is what the roadmap say)
JsRender now has a public beta candidate: borismoore.com/2012/03/…
I'm using DoT templates now, good performance, and Mustache like notation

alex · Accepted Answer · 2011-09-08 02:13:55Z

up vote 94 down vote accepted

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.

edited Sep 8 '11 at 2:13

alex
140k51261460

answered Oct 15 '08 at 3:01

ewbi
1,41375

6

+1 for "Client Templating with jQuery" – Amr ElGarhy Feb 24 '10 at 12:37

2

github.com/jquery/jquery-tmpl is the actual repo of Resig's templating plugin. – Alexander Bird Jul 17 '10 at 17:50

@Thr4wn, the source at the repro is significantly then the library discussed in the linked articles. Both by Resig though, sure. – Frank Schwieterman Jul 25 '10 at 18:38

@Frank "the source at the repro is significantly then the library discussed in the linked articles" Um huh? Say what? Not sure what you mean by this at all. – Mark Schultheiss Jul 29 '10 at 12:33

1

@Mark: he meant "significantly different than." – Domenic Sep 20 '10 at 6:35

show 1 more comment

Tom Leys · Answer 2 · 2012-04-11 02:00:43Z

up vote 44 down vote

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

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

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

edited Apr 11 '12 at 2:00

Tom Leys
8,98831836

answered Jul 16 '10 at 15:47

Todd Menier
1,9331223

+1. But I used Rick Strahl's. Bcoz it's a small one and serves my purpose well. – iSid Jul 17 '10 at 11:31

it was just announced that this is now official plugin – serg Oct 7 '10 at 21:35

19

Unfortunately, it was depreciated. any forker? – OnesimusUnbound Oct 10 '11 at 8:53

3

Has the scenario changed now in 2012, i mean, are there better solutions to templating by using libraries developed on top of resig's original script ? – user01 Sep 23 '12 at 6:48

2

@OnesimusUnbound It has been super-seeded by JS Render. github.com/BorisMoore/jsrender – Blowsie Dec 19 '12 at 8:05

show 2 more comments

Kev Burns · Answer 3 · 2009-08-17 10:27:09Z

up vote 23 down vote

jQote: http://aefxx.com/jquery-plugins/jqote/
Someone took Resig's micro-templating solution and packaged it into a jQuery plugin.
I'll be using this until Resig releases his own (if he releases his own).
Thanks for the tip, ewbi.

answered Aug 17 '09 at 10:27

Kev Burns
1,9761010

I actually just implemented this into production and it's working rather nicely – lomaxx May 1 '10 at 11:37

7

This has now become jQote2: aefxx.com/jquery-plugins/jqote2 – Alex Angas Jun 20 '10 at 23:57

Tomasz Mazur · Answer 4 · 2009-08-07 07:13:10Z

up vote 14 down vote

jQuery Nano: http://github.com/trix/nano

answered Aug 7 '09 at 7:13

Tomasz Mazur
14912

1

9 lines of code. Just what I was looking for! – Jonathon Hill May 11 '12 at 23:29

This doesn't do control structures (ifs and loops) – mahemoff Feb 7 at 8:33

jonsequitur · Answer 5 · 2011-04-23 18:39:57Z

jQuery-tmpl will be in the jQuery core beginning in jQuery 1.5:
http://blog.jquery.com/2010/10/04/new-official-jquery-plugins-provide-templating-data-linking-and-globalization/
The official documentation is here:
http://api.jquery.com/category/plugins/templates/

EDIT: It's been left out of jQuery 1.5 and will now be coordinated by the jQuery UI team, as it will be a dependency of the upcoming jQuery UI Grid.
http://blog.jquery.it/2011/04/16/official-plugins-a-change-in-the-roadmap/

Christian Vest Hansen · Answer 6 · 2008-10-04 13:33:24Z

up vote 11 down vote

Not sure how it handles your specific problem, but there's also the PURE template engine.

answered Oct 4 '08 at 13:33

Christian Vest Hansen
4,8811432

	besides its limitations, PURE is very easy to use – Jader Dias Aug 12 '10 at 16:10
	@Jader, what limitations are the most painful? – Mic Sep 23 '10 at 10:21
	@Mic PURE is limited by design. In server-side template engines you don't have to stick to valid HTML, but PURE is based on HTML. But I think there are quirks that would a allow another javascript template engine to be as powerful as the server side ones. – Jader Dias Sep 23 '10 at 11:46
	@Jader, ok for HTML only. But I didn't get what do you mean by quirks and another engine. – Mic Sep 23 '10 at 12:08
	@Mic PURE should have to be rewritten from scratch to allow some features to be included. To allow invalid HTML templates you should use `script` tags with attribute `type` different from `text/javascript`. This is one "quirk" that would allow invalid HTML. – Jader Dias Sep 23 '10 at 13:00

show 1 more comment

Eran Medan · Answer 7 · 2012-02-29 05:27:12Z

It depends on how you define "best", please see my post here on the topic
If you look for the fastest, here is a nice benchmark, it seems that DoT wins, and leaves everyone else behind
If you are looking for the most official JQuery plugin, here is what I found out
Part I: JQuery Templates
The beta, temporarily-official JQuery template plugin was this http://api.jquery.com/category/plugins/templates/
But apparently, not too long ago it was decided to keep it in Beta...

Note: The jQuery team has decided not to take this plugin past beta. It is no longer being actively developed or maintained. The docs remain here for the time being (for reference) until a suitable replacement template plugin is ready.

Part II: The next step
The new roadmap seem to aim for a new set of plugins, JSRender (independent of DOM and even JQuery template rendering engine) and JSViews which have some nice data binding and observer / observable pattern implementation
Here is the blog post on the topic
http://www.borismoore.com/2011/10/jquery-templates-and-jsviews-roadmap.html
And here is the latest source

JSViews https://github.com/BorisMoore/jsviews
JSRender https://github.com/BorisMoore/jsrender

Other resources

A nice presentation on the topic http://www.slideshare.net/BorisMoore/jsviews-next-generation-jquery-templates
Working demos: http://borismoore.github.com/jsviews/demos/index.html

Note it's still not even in beta, and only a road map item, but seems like a good candidate to become an official JQuery/JQueryUI extension for templates and UI binding

Ajay Patel · Answer 8 · 2012-05-07 13:53:37Z

up vote 6 down vote

http://garann.github.com/template-chooser/ this link is really helpful for selecting a Javascript Base Template.

answered May 7 '12 at 13:53

Ajay Patel
558312

levik · Answer 9 · 2008-10-04 13:40:11Z

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).

Yann · Answer 10 · 2010-07-29 04:43:37Z

up vote 2 down vote

Others have pointed jquery-tmpl, and I have upvoted those answer. But be sure to have a look at github forks.
There are important fixes out there and interesting features too. http://github.com/jquery/jquery-tmpl/network

answered Jul 29 '10 at 4:43

Yann
1176

1

Any particular fork to look at for fixes? – Kevin Hakanson Aug 6 '10 at 15:43

TBH, it's a bit messy... I went for github.com/appendto/jquery-tmpl after a quick scan on the changes and considering the fact that appendto is a company. YMMV – Yann Aug 10 '10 at 22:11

jquery-tmpl has been folded in the official 1.4.3 distribution. – Yann Oct 14 '10 at 5:30

morgancodes · Answer 11 · 2009-05-18 14:35:38Z

up vote 1 down vote

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

answered May 18 '09 at 14:35

morgancodes
6,207859105

mckamey · Answer 12 · 2009-05-19 03:53:05Z

If you're working in the .NET Framework 2.0/3.5, you should take a look at JBST as implemented by http://JsonFx.net. It has a client-side templating solution that has familiar JSP/ASP syntax but is precompiled at build-time for compact cache-able templates that don't need to be parsed at runtime. It works well with jQuery and other JavaScript libraries as the templates themselves are compiled to pure JavaScript.

EShy · Answer 13 · 2010-04-28 21:21:20Z

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.

Donovan Walker · Answer 14 · 2011-03-29 21:54:04Z

For very light work jquery-tmpl is adequate, but it requires in some cases that the data know how to format itself (bad thing!).
If you're looking for a more full featured templating plugin I'd suggest Orange-J. It was inspired by Freemarker. It supports if, else, loops over objects & arrays, inline javascript, including templates within templates and has excellent formatting options for output (maxlen, wordboundary, htmlentities, etc).
Oh, and easy syntax.

molokoloco · Answer 15 · 2011-11-08 22:04:32Z

Only to be the foolish ^^

// LighTest TPL
$.tpl = function(tpl, val) {
    for (var p in val)
        tpl = tpl.replace(new RegExp('({'+p+'})', 'g'), val[p] || '');
    return tpl;
};
// Routine...
var dataObj = [{id:1, title:'toto'}, {id:2, title:'tutu'}],
    tplHtml = '
N°{id} - {title}
',
    newHtml    = '';
$.each(dataObj, function(i, val) {
     newHtml += $.tpl(tplHtml, val);
});
var $newHtml = $(newHtml).appendTo('body');

http://jsfiddle.net/molokoloco/w8xSx/ ;)

studgeek · Answer 16 · 2011-03-23 20:21:03Z

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/.

ssharma · Answer 17 · 2013-01-21 11:16:20Z

Dropbox using John Resig's template engine on website. They have little bit modified it you can check in this js file of dropbox. Search in this file for tmpl and you will code of template engine.
Thanks. Hope it will be useful for someone.

mpapis · Answer 18 · 2010-11-04 21:41:44Z

There is also an rewrite of PURE by beebole - jquery pure html templates - https://github.com/mpapis/jquery-pure-templates
It should allow a lot more automatic rendering mostly using jquery selectors, whats more important it does not require to put fancy things into HTML.

Smart news™

Search This Blog

jQuery templating engines

jQuery templating engines

19 Answers

Comments