views:

912

answers:

12

Templates are a pretty healthy business in established programming languages, but are there any good ones that can be processed in Javascript?

By "template" I mean a document that accepts a data object as input, inserts the data into some kind of serialized markup language, and outputs the markup. Well-known examples are JSP, the original PHP, XSLT.

By "good" I mean that it's declarative and easy for an HTML author to write, that it's robust, and that it's supported in other languages too. Something better than the options I know about. Some examples of "not good":


String math:

element.innerHTML = "<p>Name: " + data.name
    + "</p><p>Email: " + data.email + "</p>";

clearly too unwieldy, HTML structure not apparent.


XSLT:

<p><xsl:text>Name: </xsl:text><xsl:value-of select="//data/name"></p>
<p><xsl:text>Email: </xsl:text><xsl:value-of select="//data/email"></p>

// structurally this works well, but let's face it, XSLT confuses HTML developers.


Trimpath:

<p>Name: ${data.name}</p><p>Email: ${data.email}</p>

// This is nice, but the processor is only supported in Javascript, and the language is sort of primitive (http://code.google.com/p/trimpath/wiki/JavaScriptTemplateSyntax)


I'd love to see a subset of JSP or ASP or PHP ported to the browser, but I haven't found that.

What are people using these days in Javascript for their templating?

Addendum

After a few months there have been plenty of workable template languages posted here, but most of them aren't usable in any other language. Most of these templates couldn't be used outside a javascript engine.

The exception is Microsoft's -- you can process the same ASP either in the browser or in any other ASP engine. That has its own set of portability problems, since you're bound to Microsoft systems. I've marked that as the answer, but am still interested in more portable solutions.

Thanks for all the input so far!

+8  A: 

John Resig has a mini javascript templating engine at http://ejohn.org/blog/javascript-micro-templating/

Mladen Mihajlovic
I was about to post a link to his article, when I saw your post :)
roosteronacid
I do like Resig's engine a lot. Problem is that it can never be supported outside of Javascript, because it relies on inline Javascript for all control flow. (Much like the way that JSP 1 relied on inline Java, to the same effect, which JSP 2 tried to rectify.)
Travis Wilson
+1  A: 

Tenjin http://www.kuwata-lab.com/tenjin/ Might be what you're looking for. Haven't used it, but looks good.

Kent Fredric
+1  A: 

I wrote http://google-caja.googlecode.com/svn/changes/mikesamuel/string-interpolation-29-Jan-2008/trunk/src/js/com/google/caja/interp/index.html which describes a templating system that bolts string interpolation onto javascript in a way that prevents XSS attacks by choosing the correct escaping scheme based on the preceding context.

Mike Samuel
Looks interesting. Have you written code for this?
JW
+1  A: 

There is Client-Side Template functionality coming to the coming ASP.NET AJAX 4.0.

http://encosia.com/2008/07/23/sneak-peak-aspnet-ajax-4-client-side-templating/

Also, you can use the Microsoft AJAX Library (which is the JavaScript part of ASP.NET AJAX) by itself, without using ASP.NET.

http://www.asp.net/ajax/downloads/

Chris Pietschmann
+2  A: 

ExtJS has an exceptional templating class called Ext.XTemplate: http://extjs.com/deploy/dev/docs/?class=Ext.XTemplate

big lep
+1  A: 

I've enjoyed using jTemplates:

http://jtemplates.tpython.com/

Dave Ward
+4  A: 

I came across this today, I haven't tried it though...

http://beebole.com/pure/

ckarbass
A: 

If you are using Script# you may want to consider SharpTemplate, a strongly typed, super efficient HTML templating engine.

Shiva
+2  A: 

You might want to check out Mustache - it's really portable and simple template language with javascript support among other languages.

Mike Hordecki
+1 for naming this elegant, popular, widely available template language. Besides the fact it has implementations in many languages, your Mustache templates will also look the same everywhere. (Compare that to Tenijn, which looks like a close contender.)
Shtééf
+1  A: 

Closure templates are a fairly robust templating system from Google, and they work for both Javascript and Java. I've had good experiences using them.

Alex M.
+1  A: 

Here is one implemented in jQuery for the Smarty templating language. http://www.balupton.com/sandbox/jquery-smarty/demo/

One impressive feature is the support for dynamic updates. So if you update a template variable, it will update anywhere in the template where that variable is used. Pretty nifty.

You can also hook into variable changes using a onchange event. So that is useful for say performing effects or AJAX when say the variable "page" changes ;-)

balupton