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