This is my personal blog. The views expressed on these pages are mine alone and not those of my employer.

Thursday, August 11, 2005

DHTML Templates Tutorial

I've been playing around recently with storing small DHTML templates into my page, that I can then grab from JavaScript, do string substitution of variables in the template, and then add to the page.

The essential technique is you store your template into an HTML comment:
<div id="template">
<!--
<html>
<head>
<script language="JavaScript">
function sayHello() { alert("%message%"); }
</script>
</head>
<body onload="sayHello()">
<p>%message%</p>
</body>
</html>
-->
</div>
We surround our magic variables in the template with %; in the example above we only have one, %message%.

Once the page is finished loading, you can then grab the template and replace its values with your own; in the code below we have a method initialize that is called when the page is finished loading with a message that will be written into the template, "Hello Template World!":
<script language="JavaScript">
function initialize(message) {
// get our template that we will write into the iframe
var templateDiv = document.getElementById("template");
var currentElement = templateDiv.firstChild;
// loop until we get a COMMENT_NODE
while (currentElement && currentElement.nodeType != 8) {
currentElement = currentElement.nextSibling;
}
var template = currentElement.nodeValue;

// replace the templated value in the constants with
// our new value
var newContent = template.replace(/\%message\%/g, message);

// get our iframe
var testFrame = document.getElementById("testFrame");

// now write out the new contents
var doc = testFrame.contentDocument;
if (doc == undefined || doc == null)
doc = testFrame.contentWindow.document;
doc.open();
doc.write(newContent);
doc.close();
}
</script>
The first thing we do is grab our template:
// get our template that we will write into the iframe
var templateDiv = document.getElementById("template");
var currentElement = templateDiv.firstChild;
// loop until we get a COMMENT_NODE
while (currentElement && currentElement.nodeType != 8) {
currentElement = currentElement.nextSibling;
}
var template = currentElement.nodeValue;
We get the div that holds the template, get its first child, and then loop until we encounter a COMMENT_NODE in the DOM (node type 8). Once we do, we then extract the value in the comment (currentElement.nodeValue).

Next, we then do a string substitution using JavaScript regular expressions:
// replace the templated value in the constants with our
// new value
var newContent = template.replace(/\%message\%/g, message);
Then, we grab our iframe and write out the templated contents:
// get our iframe
var testFrame = document.getElementById("testFrame");

// now write out the new contents
var doc = testFrame.contentDocument;
if (doc == undefined || doc == null)
doc = testFrame.contentWindow.document;
doc.open();
doc.write(newContent);
doc.close();

Try out the demo and see the full source code. You should see a popup that says "Hello Template World!" and should see the same value written into the iframe that is visible with a box around it.

This has been tested in IE 6+ and FireFox.

What's good about this technique:
What's bad about this technique:

This page is powered by Blogger. Isn't yours?

Subscribe to Posts [Atom]