Javascript template system - PURE, EJS, jquery plugin?

Question

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

Mark, if this is still alive, I'm building our app exclusively with PURE and if you have any question you can post them at the forum: http://groups.google.com/group/Pure-Unobtrusive-Rendering-Engine — Mic, Feb 08 '10 at 23:44

score 2 · Answer 1 · answered Jun 17 '11 at 18:40

2

HAML Coffee.
Combining the two best meta-languages.

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

answered Jun 17 '11 at 18:40

Duke

7,070
3
38
28

There is also a Ruby gem that allows you to use haml-coffee within the asset pipeline or as tilt template: https://github.com/netzpirat/haml_coffee_assets – Netzpirat Apr 12 '12 at 17:08

score 1 · Answer 2 · answered Dec 08 '09 at 20:51

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/

answered Dec 08 '09 at 20:51

Jage

7,990
3
32
31

balupton · Answer 3 · 2010-07-01T06:22:07.930

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

score 1 · Answer 4 · answered Feb 02 '10 at 21:57

1

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!

answered Feb 02 '10 at 21:57

aefxx

24,835
6
45
55

In the meantime, jQote2 has been released: http://aefxx.com/jquery-plugins/jqote2/ – chiborg Jul 16 '10 at 10:08

score 1 · Answer 5 · edited Sep 18 '12 at 13:46

1

JQuery-HAML is good.

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

edited Sep 18 '12 at 13:46

saluce

13,035
3
50
67

answered Dec 22 '10 at 23:07

Michael Pabst

11
1

score 0 · Answer 6 · answered Dec 08 '09 at 23:16

0

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

answered Dec 08 '09 at 23:16

Corey Hart

10,316
9
41
47

Marcus · Answer 7 · 2009-12-09T00:14:52.320

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/

score 0 · Answer 8 · answered Dec 09 '09 at 00:42

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

score 0 · Answer 9 · answered Feb 23 '10 at 11:58

0

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.

answered Feb 23 '10 at 11:58

Ian Lewis

1,311
13
18

score 0 · Answer 10 · answered Jul 15 '10 at 04:17

0

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

answered Jul 15 '10 at 04:17

omar gomez

1

score 0 · Answer 11 · answered Dec 22 '10 at 23:35

0

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.

answered Dec 22 '10 at 23:35

rlayte

538
4
12

score -1 · Answer 12 · answered Jan 17 '10 at 01:39

-1

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

answered Jan 17 '10 at 01:39

Shiva

18,235
4
20
9

Javascript template system - PURE, EJS, jquery plugin?

12 Answers12

Linked