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

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.

Answer 2

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

Answer 3

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 = '<div>N°{id} - {title}</div>',
    newHtml    = '';
$.each(dataObj, function(i, val) {
     newHtml += $.tpl(tplHtml, val);
});
var $newHtml = $(newHtml).appendTo('body');

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

Answer 4

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.

Answer 5

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.

Answer 6

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.