jQuery templating engines [closed]

StackOverflow https://stackoverflow.com/questions/170168

  •  05-07-2019
  •  | 
  •  

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?

Was it helpful?

Solution

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.

OTHER TIPS

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

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.

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

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/

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

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

Other resources

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

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

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

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

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

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

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.

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.

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.

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

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.

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

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top