Tuesday, March 14th, 2006
Ajax Templating - Separation of Layout and Logic
Category: PHP
, Programming, Prototype
In this informative blog entry, BorkWeb.com shares a method for creating a templating system generated wholely with Ajax and PHP.
While Ajax is the cause for the article, the heavy focus is on templating. For the past few years I have been using XTemplate as my templating library (I’m a PHP buff) and have been happily separating my logic from my layout…unitl I ran smack dab into the power of Javascript. My PHP still kept its separation from HTML as is the purpose of XTemplate, but it was my HTML that became littered with little nuggets of Javascript all over the place. No matter the method to my Ajax madness, this was my problem.
They step through the process, noting first what templating is really defined as and how it can be useful to just about anyone. They give their examples in PHP, but it can easily be conformed to just about any other language quickly and easily. They set up a templating situation where all seems ideal, except, of course, for one small problem - dynamic control of (javascript) user events in HTML elements on the page (onClick/onMouseOver/etc).
His solution? He uses the Behaviour libray that’s built on top of everyone’s favorite Javascript library, Prototype. With a few quick lines of Javascipt, a bulleted list is created so that, onClick the item selected will be removed from the list.
You can find out more about each of the projects mentioned from their homepages:
- XTemplates (PHP Templating Library)
- Prototype (Ajax/Javascript toolkit)
- Script.aculo.us (DOM manipulation library built on Prototype)
- Behaviour (a Javascript event library)
What is seperation?
a bit too much js. no js, no website, not good ;)
Dojo provides much the same facility through it’s widget system. Templates separate the view and behavior from the (hopefully) semantic markup that declares the widget in the page.
There’s also a large number of people that might take exception to the assertion that Prototype is “everyone’s favorite JavaScript library”.
Regards
Behaviour.js is not built on Prototype.js at all - it’s completely standalone.