123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110 |
- <!--
- 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>
|