• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<html>
2<head><title>Jstemplates: Quick example</title>
3  <script src="../util.js" type="text/javascript"></script>
4  <script src="../jsevalcontext.js" type="text/javascript"></script>
5  <script src="../jstemplate.js" type="text/javascript"></script>
6  <script type="text/javascript">
7    var tplData = {username:"Joe User",
8                     addresses:[
9                       {location:"111 8th Av.", label:"NYC front door"},
10                       {location:"76 9th Av.", label:"NYC back door"},
11                       {location:"Mountain View", label:"Mothership"}
12                     ]};
13
14    function showData() {
15      // This is the javascript code that processes the template:
16      var input = new JsEvalContext(tplData);
17      var output = document.getElementById('tpl');
18      jstProcess(input, output);
19    }
20    </script>
21</head>
22<body onload="showData()">
23
24<!--
25This is the template:
26-->
27<div id="tpl">
28<h1>
29  <span jsselect="username" jscontent="$this">User de Fault</span>'s
30  Address Book
31</h1>
32<span jsdisplay="addresses.length==0">Address book is empty.</span>
33<table cellpadding="5" jsdisplay="addresses.length">
34<tr><td><h2>Location:</h2></td><td><h2>Label:</h2></td></tr>
35<tr jsselect="addresses"><td jscontent="location"></td><td jscontent="label"></td></tr>
36</table>
37</div>
38
39</body>
40</html>
41