| Index: chrome/third_party/jstemplate/jstemplate_example.html
|
| ===================================================================
|
| --- chrome/third_party/jstemplate/jstemplate_example.html (revision 0)
|
| +++ chrome/third_party/jstemplate/jstemplate_example.html (revision 0)
|
| @@ -0,0 +1,110 @@
|
| +<!--
|
| +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>
|
|
|