OLD | NEW |
| (Empty) |
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 user = "Jane User"; | |
8 | |
9 var tpl1Data = {addresses:[ | |
10 {location:"111 8th Av.", label:"NYC front door"}, | |
11 {location:"76 9th Av.", label:"NYC back door"}, | |
12 {location:"Mountain View", label:"Mothership"} | |
13 ] | |
14 }; | |
15 | |
16 var tpl2Data = {addresses:[ | |
17 {location:"534 Carlton Ave."}, | |
18 {location:"772 Broadway"} | |
19 ] | |
20 }; | |
21 | |
22 function showData() { | |
23 // This is the javascript code that processes the template: | |
24 var parent = new JsEvalContext(); | |
25 parent.setVariable('username', user); | |
26 | |
27 var input1 = new JsEvalContext( tpl1Data, parent); | |
28 var output1 = document.getElementById('tpl1'); | |
29 jstProcess(input1, output1); | |
30 | |
31 var input2 = new JsEvalContext( tpl2Data, parent); | |
32 var output2 = document.getElementById('tpl2'); | |
33 jstProcess(input2, output2); | |
34 } | |
35 </script> | |
36 </head> | |
37 <body onload="showData()"> | |
38 | |
39 | |
40 <div id="tpl1"> | |
41 <h1> | |
42 <span jsselect="username" jscontent="$this">User de Fault</span>'s | |
43 Address Book | |
44 </h1> | |
45 <table cellpadding="5"> | |
46 <tr><td><h2>Location:</h2></td><td><h2>Label:</h2></td></tr> | |
47 <tr jsselect="addresses"><td jscontent="location"></td><td jscontent="label"></t
d></tr> | |
48 </table> | |
49 </div> | |
50 | |
51 <div id="tpl2"> | |
52 <h1 jsselect="username" jscontent="$this + '\'s Previous Searches'"></h1> | |
53 <ul> | |
54 <li jsselect="addresses" jscontent="location"></li> | |
55 </ul> | |
56 </div> | |
57 | |
58 </body> | |
59 </html> | |
OLD | NEW |