Monday, September 15th, 2008
Patroon: Another JavaScript Templating Solution
Category: JavaScript, Library
The way it works is simple. You setup the data that you will be able to access in the template:
JAVASCRIPT:
-
-
var data = {
-
comment: [{
-
date: "2008-09-07 12:28:33",
-
name: "David Beckham",
-
website: "beckham.com",
-
text: "I watched the euro finals on tv..."
-
}, {
-
date: "2008-09-07 14:28:33",
-
name: "Tuncay",
-
website: "",
-
text: "Me too"
-
}]
-
};
-
Then you create an HTML template with variables a la {variablename}:
HTML:
Then you run the template and put the output back into the DOM:
JAVASCRIPT:
-
-
// The comments template will be removed from the DOM!
-
var template = new Template('comments-template');
-
-
// not using a library
-
-
// template will result in a new DOM node
-
var result = template.expand(data);
-
-
// insert the resulting node into the comments container
-
var container = document.getElementsByClassName('comments')[0];
-
container.appendChild(result);
-
-
// using jquery
-
$('.comments').expand(template, data);
-
Related Content:
2.6 rating from 18 votes
This is cool and all, and defeinitely could have its uses, but without some form of content negotiation to feed this to spiders, isn’t this SEO suicide?
Just don’t use templating on searchable pages. I’d never use templating on a home page, but I use it a lot for admin interfaces and other systems that are not SEO oriented.
Using JS also on the server fixes the SEO problem…
I don’t see the templating code being much of a breakthrough, but I appreciate the linked tutorial as a whole — I too think it’s much more efficient to use flat-files when possible in simple situations.
EJS anyone? http://embeddedjs.com It’s probably the easiest to use JS template system. It allows you to load templates from files.
Futhermore, with JavaScriptMVC, you can compress processed templates into your production script: http://javascriptmvc.com
ashooner: This templating solution is meant for ajax applications, so if you want searchable pages, you should use a server-side scripting language.
My use case was the comment-system on my blog. It should work on static files, because my blog engine just generates a bunch of static pages. So the comments are loaded seperately on each page view as JSON data and rendered via Patroon.
I’d like to point out something, which wasn’t quite clear in this article. Patroon uses two kinds of rendering techniques: DOM Node manipulation and String interpolation. Used together this technique is quite powerful as you can keep your templates clean through the use of meaningful class names and variable insertion inside attributes and text sections.
I’m not quite satisifed with the scoping rules. Using class names is problematic, as the engine doesn’t know exactly if a class name is meant for styling or for data binding. Sometimes both purposes overlap and sometimes not, therefore opening new scopes through the use of a class name is not what I want.
It would be nice if the templating supported conditionals like like EXT’s XTemplate. Also I don’t think putting markup in the dom is the best idea. Storing the template in a Javascript variable would be better.
Conditionals would be hard to add. The template is not available as string, because it is processed as DOM node. But you may add conditionals inside the evaluated code:
{website ? link(name, website) : name}Well, the link helper doesn’t exist, but this is a strong case for adding it.
For true JavaScript templates that let you utilize the full JavaScript language within your markup, consider the UIZE implementation. The idea is nothing terribly revolutionary (it’s really just like what you’d expect from aspx or other systems that let you mix control code within markup for output).
Innovations include the ability to compile the .jst (JavaScript Template) files to functions for optimized re-processing, as well as the ability to build .jst files into generator code modules that can be used to generate markup for widget instances. JST’s can be compiled using a build script as part of a site build process, or they can be dynamically compiled on the client side.
Other innovations include the concept of directives (JavaScript code that can run during template compilation, rather than at runtime template processing). Ultimately, a server side JavaScript solution could allow processing of JST’s on the server side for page generation, but the JST’s could then also be passed to the client for smooth / instantaneous client updates / rebuilds of DOM.
Documentation at…
http://www.uize.com/explainers/javascript-templates.html
I have built a library similar to this. It also uses inline tags with rich semantics allowing you to bind to an entire hierarchy, bind recursively to any depth and has support for alternation and output formatting.
You can see it at: http://jsrepeater.devprog.com
There are some examples on the site showing this in action with the JSON returned from Google Search and Feeds as well as a forum based on jsRepeater itself.
It looks like we are both on a similar track. Nice work Matthias.
Patroon has changed a bit. Please read the update.
ShawnS: jsrepeater looks great. So great, that I borrowed the context attribute, improving the template algorithm significantly.
The move towards standards based templates, is very positive in my opinion, PURE (Pure Unobtrusive Render Engine) and chain.js being two great examples. These can run serverside with Jaxer (I work on that product @ aptana). Getting away from the special template syntax forced on us with solutions based on the old java velocity model is a good thing, EJS, trimpath etc are all well and good but dont have any kind of standard or generic support in IDE’s. So having templates based on CSS, HTML and JS is really the way to go. With serverside support you can even handle the SEO stuff by rendering the page serverside for the spider, which is a much better solution than all that progressive enhancement malarkey you’d otherwise have to do to get the brain dead web 1.0 googlebots etc, to make a decent job of indexing any kind of functionally ‘advanced’ web site,
I have looked at other template libraries (JSBind, PURE..), but find JSRepeater exactly what I was looking for.
I tested with a Twitter and Youtube JSONP feed and this library works just great.
I only wish to know more about the project because I think it’s really good. The website doesn’t provide much background info, but the howto’s are good. http://jsrepeater.devprog.com
So ShawnS, could you add some about info on your site?