Javascript template system - PURE, EJS, jquery plugin??

Question

Hi there,

has anybody used a javascript template system? I used to use the one that is embedded with JavascriptMVC but i now doing server side development so i wanted a more streamlined/thinner version..

I have found 2. 1 is EJS which is the part that is included with JavascriptMVC

http://embeddedjs.com/

and the other is Pure- which you can use with jquery

http://beebole.com/pure/index.html

has anyone had any experience with either, or is there something else that i have failed to find? maybe a jquery type plugin or something..

basically i need to replace parts of a HTML document within javascript at runtine without a call to the server.

but my html replacement code needs to be saved in an external file and not embedded within js

Any help really appreciated

thanks

Answer 1

Hey, I used this a time or two, and it was pretty simple. It's from the guy who wrote jquery.

http://ejohn.org/blog/javascript-micro-templating/

Answer 2

Prototype Template is quick and easy, if prototype is an option. If you really need a jQuery plugin, I wrote a port of it (shameless plug).

Answer 3

I've used EJS extensively. Coming from a Rails background, it's been perfect for my needs since it's so similar to ERB.

I'd recommend it. It's being actively maintained and the developers are extremely responsive. Also, in the benchmarks I've run, it's very fast. I'm using it for a mobile site for iPhone/Android.

For a few others, check out this blog post: http://www.viget.com/extend/benchmarking-javascript-templating-libraries/

Answer 4

Here's a stand alone, custom solution that I've written that is incredibly small and mimics Prototype's template system:

var templater = function(template, tokens, tokenIdentifier) {
    tokenIdentifier = tokenIdentifier || "$";
    // Decode HTML encoded template tokens %7B -> {, %7D -> }
    template = template.replace(
        new RegExp("\\" + tokenIdentifier + "%7B(\\w+)%7D", "gi"), 
        tokenIdentifier + "{$1}"
    );

    for ( var i in tokens ) {
        if ( tokens.hasOwnProperty(i) ) {
            template = template.replace(
                new RegExp("\\"+tokenIdentifier+"\\{"+i+"\\}", "g"),
                tokens[i]
            );
        }
    }

    return template;
};

Usage:

templater("Hi, my name is ${name}", {name: "Bobo the Clown"});
// The token identifier defaults to $, but can be changed arbitrarily
templater("#{title} #{surname} #{verb} #{noun}", {title: "Dr.", surname: "Amazing", verb: "packed", noun: "sand"}, "#");

Output:

Hi, my name is Bobo the Clown
Dr. Amazing packed sand

Answer 5

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

Answer 6

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

Answer 7

If you use the jQuery framework by any chance, I could recommend a plugin called jQote to you. Some guy took John Resig's engine and packed it into a plugin, making it easy as hell to do javascript templating.

http://aefxx.com/jquery-plugins/jqote

Cheers!

Answer 8

I agree with Jage.

http://ejohn.org/blog/javascript-micro-templating/ is very simple and quick to implement. You don't have to do loads of work to get a good result.

Answer 9

Take a look at hacktl.js http://code.google.com/p/hacktl/ . Light and simple