89

Any suggestions on which HTML template library would go well with JQuery? Googling turns up quite a number of libraries but I'm not sure whether there is a well recognized library that would stand the test of time.

Todd Ditchendorf
  • 11,217
  • 14
  • 69
  • 123
Shiva
  • 18,235
  • 4
  • 20
  • 9
  • 21
    Say you bring back a json object with 100 records. Each record needs to generate the same html fragment. It just helps to use a template than generate the markup in js. Allows a designer to design it also rather than the markup being inside a string in a js function – redsquare Jan 16 '09 at 09:48
  • 3
    @cletus - because it's easier to use a html formatted template than a chain of append's – Andrey Jan 19 '11 at 22:37
  • 2
    Use this perf comparison to help you on your choice : http://jsperf.com/dom-vs-innerhtml-based-templating – A. M. Sep 10 '13 at 11:56

7 Answers7

58

Well, to be frank, client-side templating is very hot nowadays, but quite a jungle.

the most popular are, I believe:

  • pure: It use only js, not his own "syntax"
  • mustache: quite stable and nice I heard.
  • jqote2: extremely fast according to jsperfs
  • jquery templates (deprecated):

there are plenty others, but you have to test them to see what suits you, and your project style, best.

Personally, I have a hard time with adding a new syntax and set of logic (mixing logic and template, hello??), and went pure js. Every single one of my templates is stored in it's own html file (./usersTable.row.html). I use templates only when ajaxing content, and I have few "logic" js files, one for tables, one for div, one for lists. and not even one for select's options (where i use another method).

Each time I tried to do something more complex, I found out the code was less clear and taking me more time to stabilize than doing it the "old" way. Logic in the template is an utter non-sense in my opinion, and adding it's own syntax adds only very-hard-to-trace bugs.

roselan
  • 3,755
  • 1
  • 20
  • 20
14

jTemplates

a template engine for JavaScript.

Plugin to jQuery...

Features:

  • 100% in JavaScript
  • precompilator
  • Support JSON
  • Work with Ajax
  • Allow to use JavaScript code inside template
  • Allow to build cascading templates
  • Allow to define parameters in templates
  • Live Refresh! - automatic update content from server...
gnat
  • 6,213
  • 108
  • 53
  • 73
redsquare
  • 78,161
  • 20
  • 151
  • 159
8

There is a reasonable discussion document on this topic here, which covers a range of templating tools. Not specific to jQuery, though.

Marc Gravell
  • 1,026,079
  • 266
  • 2,566
  • 2,900
5

jQuery Templates Plugin created by Microsoft and accepted as an official jQuery plugin.

But note that it’s now deprecated.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
Andrey
  • 20,487
  • 26
  • 108
  • 176
  • 13
    and "deprecated" since. Development is halted, and this won't go out of beta. a ms guy, and jquery-ui team are working on a new template, based on JSRender thou ;) – roselan Nov 19 '11 at 12:47
  • Huh, bummer - I'm using it all over my web app :( Thanks for the tip though! Do you have a link on the upcoming templating engine you mentioned? – Andrey Nov 19 '11 at 20:01
  • 1
    if all goes well, [jsrender by boris moore](https://github.com/BorisMoore/jsrender) will find it way into jquery-ui. No need to hurry thou I guess ;) – roselan Nov 19 '11 at 21:48
  • 1
    I've implemented jsRender in a project and it's simply amazing. Well worth checking out. – ASeale Aug 03 '12 at 17:15
4

I would check out json2html, it forgoes having to write HTML snippets and relies instead on JSON transforms to convert JSON object array's into unstructured lists. Very fast and uses DOM creation.

informatik01
  • 16,038
  • 10
  • 74
  • 104
Chad Brown
  • 1,627
  • 1
  • 13
  • 22
3

A couple years ago i built IBDOM: http://ibdom.sf.net/ | As of december 2009, it supports jQuery binding if you get it straight from the trunk.

$("#foo").injectWith(collectionOfJavaScriptObjects);

or

$("#foo").injectWith(simpleJavaScriptObject);

Also, you can now put all the "data:propName" markers in class="data:propName other classnames" attributes, so you don't have to litter your application's content with those markers.

I've yet to update a bunch of the documentation on there to reflect my recent enhancements, but the i've had various versions of this framework in production since 2007.

To skeptics of this question:

Back when Microsoft invented with IE5 what we now know as XmlHttpRequest and the "ajax" pattern, part of the promise behind this was to purely exchange data between a web browser and the server. That data was to be encapsulated in XML, because in 1999/2000, XML was simply just so very hot. Beyond retrieving an xml document over the network with a call-back mechanism, MS's MSXML ActiveX component also supported a pre-draft implementation of what we now know as XSL-T and XPath.

Combining retrieving HTTP/XML, XPath, and XSL-T, afforded developers tremendous creativity to build rich "documents" which behaved as "applications", purely sending, and more importantly, retrieving data from the server.

Why is this a useful pattern? It depends on how complex your user interface is, and how much you care about its maintainability.

When building a visually very rich semantically marked-up interface with advanced CSS, the last thing you want to do is chunk-out pieces of markup into "mini-controller/views", just so you can .innerHTML a document fragment into the main document, and here's why.

One key tenet of keeping an advanced html/css user interface manageable, is to preserve its validation at least during its active phase of development. If your markup validates, you can focus on your CSS bugs. Now, if fragments of markup end-up getting injected during various stages of user-interaction, it all becomes very unwieldy to manage, and the whole thing gets brittle.

The idea was to have all of your markup UI constructs in a single document, retrieve ONLY DATA over the network, and use a solid framework which will at the very least simply inject your data into your markup constructs, and at the most replicate markup constructs which you flagged as repeatable.

This was possible with XSL-T and XPath in IE5+, but virtually no other browsers. Some F/OSS browser frameworks have been dabbling with XPath but it's not quite something we can rely on just yet.

So what's the next best thing to achieve such pattern? IBDOM. Get data from your server, inject it in your document. effortlessly.

Leo
  • 37,640
  • 8
  • 75
  • 100
Chris Holland
  • 9
  • 3
  • one more thing: IBDOM uses 100% pure DOM methods, and zero innerHTML. – Chris Holland Sep 22 '10 at 09:01
  • another note: IBDOM implements what i call "forkedLoopExecution" which is an internally-used component as well something that's usable on its own. Here was the problem: let's say you're modifying the DOM via createElement and appendChild, in some kind of looping construct which has to go over a fairly large array of big data objects: most browsers will not "repaint" the user interface, until the DOM-affecting code "returns". In a large "for loop" with a lot of data, our search results could take a noticeable half a second to a couple of seconds before displaying the whole thing in one chunk. – Chris Holland Sep 22 '10 at 09:10
  • the solution: forked-loop execution leverages setTimeout-induced recursive execution throughout the life of repeatedly-passed data collection to essentially"return-and-repaint" at each loop iteration, giving you this instant rendering feeling: "give the user something to look-at right friggin now". – Chris Holland Sep 22 '10 at 09:12
2

You should get a look on Javascript-Templates, this is a small template engine used within the famous jQuery File Upload plugin, and developed by the same author, Sebastian Tschan (@blueimp)

https://github.com/blueimp/JavaScript-Templates

Follow the usage guide made by Sebastian, just remove this line

document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);

Replace it with this one

$('#result').html(tmpl('tmpl-demo', data));

Don't forget to add the div result tag in you HTML file too

<div id="result"></div>

Enjoy

vinzcelavi
  • 831
  • 9
  • 10