Templates in Prototype
March 17th, 2008As much as I love jQuery, prototype templates have made it into more than one of my projects because of their versatility and ease of use. They are a capable and amazing tool for formatting and displaying output on the client side and I thought I’d take a few minutes to dive into them.
So what are templates. In short they are a string with symbols embedded that are replaced at the time of evaluation to create a new string. For example:
var apple = { fruit: "apple", variety: "honeycrisp" };
var templ = new Template( "My favorite fruit are #{variety} #{apple}s." );
console.log( templ.evalaluate( apple ));
>>> My favorite fruit are honeycrisp apples.
This basic example is really all there is to templates. But, they can be incredibly useful for formatting and displaying JSON data. and repurposing things in universal ways across an app.
Previous Post 
Next Post 
3 Comments
March 20th, 2008 at 9:30 am
You might also want to check out Embedded JS (embeddedjs.com). It loads separate template files and provides rails-like helpers. Good stuff.
February 4th, 2009 at 3:35 pm
If all you want are Prototype-like templates in jQuery, you should check out my jQuery plugin, Simple Templates. Like you, I missed Prototype’s easy templating model, so I wrote the plug-in to behave similarly. It’s here: http://andrew.hedges.name/blog/2008/09/03/introducing-jquery-simple-templates
You can also implement templating very simply in “pure” JavaScript with the code snippet here: http://snipt.org/rpp
March 26th, 2009 at 10:44 am
I think you meant:
var templ = new Template( “My favorite fruit are #{variety} #{fruit}s.” )