<html>
<head><title>Jstemplates: Quick example</title>
<script src="../util.js" type="text/javascript"></script>
<script src="../jsevalcontext.js" type="text/javascript"></script>
<script src="../jstemplate.js" type="text/javascript"></script>
<script type="text/javascript">
var tplData = {username:"Joe User",
addresses:[
{location:"111 8th Av.", label:"NYC front door"},
{location:"76 9th Av.", label:"NYC back door"},
{location:"Mountain View", label:"Mothership"}
]};
function showData() {
// This is the javascript code that processes the template:
var input = new JsEvalContext(tplData);
var output = document.getElementById('tpl');
jstProcess(input, output);
}
</script>
</head>
<body onload="showData()">
<!--
This is the template:
-->
<div id="tpl">
<h1>
<span jsselect="username" jscontent="$this">User de Fault</span>'s
Address Book
</h1>
<span jsdisplay="addresses.length==0">Address book is empty.</span>
<table cellpadding="5" jsdisplay="addresses.length">
<tr><td><h2>Location:</h2></td><td><h2>Label:</h2></td></tr>
<tr jsselect="addresses"><td jscontent="location"></td><td jscontent="label"></td></tr>
</table>
</div>
</body>
</html>