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?

Pastorship

I wanted to upvode this question twice :) – Urbain

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) – Shafer

JsRender now has a public beta candidate: borismoore.com/2012/03/… – Metaphase

I'm using DoT templates now, good performance, and Mustache like notation – Shafer

Answer 1

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.

Roughage

github.com/jquery/jquery-tmpl is the actual repo of Resig's templating plugin. – Herren

@Thr4wn, the source at the repro is significantly then the library discussed in the linked articles. Both by Resig though, sure. – Frazzle

@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. – Urbain

@Mark: he meant "significantly different than." – Advertent

I haven't seen any examples of complex forms being built with this. Has anyone explored what it would take to i.e. add a row, some part of a whole template, to accommodate a new element in the form's bound a object's array? The template would include templating the element indexes of arrays and could be properly serialized for POSTing. But I'm having trouble thinking it all through. The goal is InfoPath-like functionality. (I'm aware of the various existing infopath features and infopath alternatives.) – Infelicitous

Answer 2

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

Siana

+1. But I used Rick Strahl's. Bcoz it's a small one and serves my purpose well. – Kenna

it was just announced that this is now official plugin – Hoggard

Unfortunately, it was depreciated. any forker? – Servetnick

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 ? – Eurasian

@Servetnick It has been super-seeded by JS Render. github.com/BorisMoore/jsrender – Higdon

@Blowsie, I'm aware of it and I've used it in one of my project. Anyway, thanks for add the new link in the comment for future reference. – Servetnick

Answer 3

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.

Mozellamozelle

This has now become jQote2: aefxx.com/jquery-plugins/jqote2 – Cement

Answer 4

jQuery Nano:

Template Engine

Basic Usage

Assuming you have following JSON response:

data = {
  user: {
    login: "tomek",
    first_name: "Thomas",
    last_name: "Mazur",
    account: {
      status: "active",
      expires_at: "2009-12-31"
    }
  }
}

you can make:

nano("<p>Hello {user.first_name} {user.last_name}! Your account is <strong>{user.account.status}</strong></p>", data)

and you get ready string:

<p>Hello Thomas Mazur! Your account is <strong>active</strong></p>

Test page...

Boundary

This doesn't do control structures (ifs and loops) – Lysenko

Answer 5

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/

Elaterite

Answer 6

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

Subtenant

besides its limitations, PURE is very easy to use – Alric

@Jader, what limitations are the most painful? – Aggappera

@Aggappera 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. – Alric

@Jader, ok for HTML only. But I didn't get what do you mean by quirks and another engine. – Aggappera

@Aggappera 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. – Alric

I used PURE for a while and recently moved over to the official jQuery-tmpl. PURE is not easy to read. I had many a co-worker ask for help looking at PURE. Nobody has asked for help looking at jQuery-tmpl. – Eames

Answer 7

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

Shafer

Answer 8

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/ ;)

Baileybailie

Answer 9

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

Electroanalysis

Answer 10

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

Eldwon

Any particular fork to look at for fixes? – Harker

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 – Eldwon

jquery-tmpl has been folded in the official 1.4.3 distribution. – Eldwon

Answer 11

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

Johnathon

Answer 12

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.

Otherworld

Answer 13

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.

Bunkhouse

Answer 14

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.

Gastronomy

Answer 15

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

Stannwood

Answer 16

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.

Phonolite

Answer 17

I'm currently using a multi HTML templating framework. This framework makes it a lot easier to import templated data in your DOM. Also great MVC modeling.

http://www.enfusion-framework.org/ (look at the samples!)

Lashing

Answer 18

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.

Samarasamarang