1<!-- 2Copyright 2006 Google Inc. 3 4Licensed under the Apache License, Version 2.0 (the "License"); 5you may not use this file except in compliance with the License. 6You may obtain a copy of the License at 7 8 http://www.apache.org/licenses/LICENSE-2.0 9 10Unless required by applicable law or agreed to in writing, software 11distributed under the License is distributed on an "AS IS" BASIS, 12WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13See the License for the specific language governing permissions and 14limitations 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<!-- 20Author: Steffen Meschkat (mesch@google.com) 21Interactive jstemplates test page, specifically to demonstrate 22recursive 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>