Reputation: 20907

Javascript template system - PURE, EJS, jquery plugin?

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

Upvotes: 4

Answers (12)

Michael Pabst

Reputation: 11

JQuery-HAML is good.

https://github.com/creationix/jquery-haml

Upvotes: 1

Duke

Reputation: 7444

HAML Coffee.
Combining the two best meta-languages.

https://github.com/9elements/haml-coffee

Upvotes: 2

rlayte

Reputation: 538

Mustache.js has worked well for me so far. It's available for many server-side language too (Ruby, Python, Clojure, etc.) so you can use it in multiple contexts.

Upvotes: 0

omar gomez

Reputation: 1

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

Upvotes: 0

balupton

Reputation: 48640

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

Upvotes: 1

Ian Lewis

Reputation: 1311

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.

Upvotes: 0

aefxx

Reputation: 25249

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!

Upvotes: 1

Shiva

Reputation: 18275

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

Upvotes: -1

Justin Johnson

Reputation: 31300

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

Upvotes: 0

Marcus

Reputation: 2041

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/

Upvotes: 0