| <!-- |
| Copyright 2006 Google Inc. |
| |
| Licensed under the Apache License, Version 2.0 (the "License"); |
| you may not use this file except in compliance with the License. |
| You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| --> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <!-- |
| Author: Steffen Meschkat (mesch@google.com) |
| Interactive jstemplates test page, specifically to demonstrate |
| recursive templates |
| --> |
| <head> |
| <title>Interactive tests for jstemplate</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 src="jstemplate_example.js" type="text/javascript"></script> |
| <style type="text/css"> |
| .section { border: 1px solid silver; margin: 1em; } |
| .section TEXTAREA { border: none; width: 100%; } |
| </style> |
| </head> |
| <body onload="jsinit()"> |
| <table summary="Test setup"> |
| <tr> |
| <th>template</th> |
| <th>data</th> |
| </tr> |
| <tr> |
| <td> |
| <textarea id="template" rows="15" cols="80"></textarea> |
| </td> |
| <td> |
| <textarea id="js" rows="15" cols="80"> |
| { title: "title1", items: [ |
| { title: "title2", items: [ |
| { title: "title2", items: [ |
| { title: "title3", items: []}, |
| { title: "title4", items: []} |
| ]}, |
| { title: "title5", items: []} |
| ]}, |
| { title: "title3", items: []}, |
| { title: "title4", items: []}, |
| { title: "title5", items: []} |
| ], |
| testArray: ["", "", "1", "2"] |
| } |
| </textarea> |
| </td> |
| </tr> |
| <tr> |
| <td colspan="2"> |
| <a href="javascript:jstest(false)">process</a> |
| <a href="javascript:jstest(true)">reprocess</a> |
| </td> |
| </tr> |
| <tr> |
| <th>output HTML</th> |
| <th>output display</th> |
| </tr> |
| <tr> |
| <td> |
| <textarea id="html" rows="15" cols="80"></textarea> |
| </td> |
| <td> |
| <div id="out" class="section"></div> |
| </td> |
| </tr> |
| </table> |
| <p><a href="javascript:jstest(false)">Process</a> the |
| <b>template</b>, upper left, with the <b>data</b>, upper |
| right. See the resulting DOM in <b>output display</b>, lower |
| right, and the corresponding HTML text in <b>output HTML</b>, |
| lower left. Notice, however, that the template processing happens |
| directly on the HTML DOM, and the HTML text shown is merely the |
| <code>innerHTML</code> of that DOM.</p> |
| <p>Now, change the <b>data</b> and <a |
| href="javascript:jstest(true)">reprocess</a> the DOM of the <b>output |
| display</b> with the changed data, and see that the <b>output |
| display</b> reflects the change. Notice that the reprocessing |
| takes place on the DOM of <b>output display</b>, i.e. on the |
| result of the previous template processing.</p> |
| <div style="display:none" id="tc"> |
| <div id="t"> |
| <span jscontent="title"></span> |
| <ul jsdisplay="items.length"> |
| <li jsselect="items"> |
| <div transclude="t"></div> |
| </li> |
| </ul> |
| <div jsselect="testArray"> |
| content: <span jscontent="$this"></span> |
| </div> |
| </div> |
| </div> |
| </body> |
| </html> |
