OLD | NEW |
| (Empty) |
1 <!-- | |
2 Copyright 2006 Google Inc. | |
3 | |
4 Licensed under the Apache License, Version 2.0 (the "License"); | |
5 you may not use this file except in compliance with the License. | |
6 You may obtain a copy of the License at | |
7 | |
8 http://www.apache.org/licenses/LICENSE-2.0 | |
9 | |
10 Unless required by applicable law or agreed to in writing, software | |
11 distributed under the License is distributed on an "AS IS" BASIS, | |
12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
13 See the License for the specific language governing permissions and | |
14 limitations under the License. | |
15 --> | |
16 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" | |
17 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
18 <html xmlns="http://www.w3.org/1999/xhtml"> | |
19 <!-- | |
20 Author: Steffen Meschkat (mesch@google.com) | |
21 Interactive jstemplates test page, specifically to demonstrate | |
22 recursive templates | |
23 --> | |
24 <head> | |
25 <title>Interactive tests for jstemplate</title> | |
26 <script src="util.js" type="text/javascript"></script> | |
27 <script src="jsevalcontext.js" type="text/javascript"></script> | |
28 <script src="jstemplate.js" type="text/javascript"></script> | |
29 <script src="jstemplate_example.js" type="text/javascript"></script> | |
30 <style type="text/css"> | |
31 .section { border: 1px solid silver; margin: 1em; } | |
32 .section TEXTAREA { border: none; width: 100%; } | |
33 </style> | |
34 </head> | |
35 <body onload="jsinit()"> | |
36 <table summary="Test setup"> | |
37 <tr> | |
38 <th>template</th> | |
39 <th>data</th> | |
40 </tr> | |
41 <tr> | |
42 <td> | |
43 <textarea id="template" rows="15" cols="80"></textarea> | |
44 </td> | |
45 <td> | |
46 <textarea id="js" rows="15" cols="80"> | |
47 { title: "title1", items: [ | |
48 { title: "title2", items: [ | |
49 { title: "title2", items: [ | |
50 { title: "title3", items: []}, | |
51 { title: "title4", items: []} | |
52 ]}, | |
53 { title: "title5", items: []} | |
54 ]}, | |
55 { title: "title3", items: []}, | |
56 { title: "title4", items: []}, | |
57 { title: "title5", items: []} | |
58 ], | |
59 testArray: ["", "", "1", "2"] | |
60 } | |
61 </textarea> | |
62 </td> | |
63 </tr> | |
64 <tr> | |
65 <td colspan="2"> | |
66 <a href="javascript:jstest(false)">process</a> | |
67 <a href="javascript:jstest(true)">reprocess</a> | |
68 </td> | |
69 </tr> | |
70 <tr> | |
71 <th>output HTML</th> | |
72 <th>output display</th> | |
73 </tr> | |
74 <tr> | |
75 <td> | |
76 <textarea id="html" rows="15" cols="80"></textarea> | |
77 </td> | |
78 <td> | |
79 <div id="out" class="section"></div> | |
80 </td> | |
81 </tr> | |
82 </table> | |
83 <p><a href="javascript:jstest(false)">Process</a> the | |
84 <b>template</b>, upper left, with the <b>data</b>, upper | |
85 right. See the resulting DOM in <b>output display</b>, lower | |
86 right, and the corresponding HTML text in <b>output HTML</b>, | |
87 lower left. Notice, however, that the template processing happens | |
88 directly on the HTML DOM, and the HTML text shown is merely the | |
89 <code>innerHTML</code> of that DOM.</p> | |
90 <p>Now, change the <b>data</b> and <a | |
91 href="javascript:jstest(true)">reprocess</a> the DOM of the <b>output | |
92 display</b> with the changed data, and see that the <b>output | |
93 display</b> reflects the change. Notice that the reprocessing | |
94 takes place on the DOM of <b>output display</b>, i.e. on the | |
95 result of the previous template processing.</p> | |
96 <div style="display:none" id="tc"> | |
97 <div id="t"> | |
98 <span jscontent="title"></span> | |
99 <ul jsdisplay="items.length"> | |
100 <li jsselect="items"> | |
101 <div transclude="t"></div> | |
102 </li> | |
103 </ul> | |
104 <div jsselect="testArray"> | |
105 content: <span jscontent="$this"></span> | |
106 </div> | |
107 </div> | |
108 </div> | |
109 </body> | |
110 </html> | |
OLD | NEW |