jstemplate_example.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <!--
  2. Copyright 2006 Google Inc.
  3. Licensed under the Apache License, Version 2.0 (the "License");
  4. you may not use this file except in compliance with the License.
  5. You may obtain a copy of the License at
  6. http://www.apache.org/licenses/LICENSE-2.0
  7. Unless required by applicable law or agreed to in writing, software
  8. distributed under the License is distributed on an "AS IS" BASIS,
  9. WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  10. See the License for the specific language governing permissions and
  11. limitations under the License.
  12. -->
  13. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  14. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  15. <html xmlns="http://www.w3.org/1999/xhtml">
  16. <!--
  17. Author: Steffen Meschkat (mesch@google.com)
  18. Interactive jstemplates test page, specifically to demonstrate
  19. recursive templates
  20. -->
  21. <head>
  22. <title>Interactive tests for jstemplate</title>
  23. <script src="util.js" type="text/javascript"></script>
  24. <script src="jsevalcontext.js" type="text/javascript"></script>
  25. <script src="jstemplate.js" type="text/javascript"></script>
  26. <script src="jstemplate_example.js" type="text/javascript"></script>
  27. <style type="text/css">
  28. .section { border: 1px solid silver; margin: 1em; }
  29. .section TEXTAREA { border: none; width: 100%; }
  30. </style>
  31. </head>
  32. <body onload="jsinit()">
  33. <table summary="Test setup">
  34. <tr>
  35. <th>template</th>
  36. <th>data</th>
  37. </tr>
  38. <tr>
  39. <td>
  40. <textarea id="template" rows="15" cols="80"></textarea>
  41. </td>
  42. <td>
  43. <textarea id="js" rows="15" cols="80">
  44. { title: "title1", items: [
  45. { title: "title2", items: [
  46. { title: "title2", items: [
  47. { title: "title3", items: []},
  48. { title: "title4", items: []}
  49. ]},
  50. { title: "title5", items: []}
  51. ]},
  52. { title: "title3", items: []},
  53. { title: "title4", items: []},
  54. { title: "title5", items: []}
  55. ],
  56. testArray: ["", "", "1", "2"]
  57. }
  58. </textarea>
  59. </td>
  60. </tr>
  61. <tr>
  62. <td colspan="2">
  63. <a href="javascript:jstest(false)">process</a>
  64. <a href="javascript:jstest(true)">reprocess</a>
  65. </td>
  66. </tr>
  67. <tr>
  68. <th>output HTML</th>
  69. <th>output display</th>
  70. </tr>
  71. <tr>
  72. <td>
  73. <textarea id="html" rows="15" cols="80"></textarea>
  74. </td>
  75. <td>
  76. <div id="out" class="section"></div>
  77. </td>
  78. </tr>
  79. </table>
  80. <p><a href="javascript:jstest(false)">Process</a> the
  81. <b>template</b>, upper left, with the <b>data</b>, upper
  82. right. See the resulting DOM in <b>output display</b>, lower
  83. right, and the corresponding HTML text in <b>output HTML</b>,
  84. lower left. Notice, however, that the template processing happens
  85. directly on the HTML DOM, and the HTML text shown is merely the
  86. <code>innerHTML</code> of that DOM.</p>
  87. <p>Now, change the <b>data</b> and <a
  88. href="javascript:jstest(true)">reprocess</a> the DOM of the <b>output
  89. display</b> with the changed data, and see that the <b>output
  90. display</b> reflects the change. Notice that the reprocessing
  91. takes place on the DOM of <b>output display</b>, i.e. on the
  92. result of the previous template processing.</p>
  93. <div style="display:none" id="tc">
  94. <div id="t">
  95. <span jscontent="title"></span>
  96. <ul jsdisplay="items.length">
  97. <li jsselect="items">
  98. <div transclude="t"></div>
  99. </li>
  100. </ul>
  101. <div jsselect="testArray">
  102. content: <span jscontent="$this"></span>
  103. </div>
  104. </div>
  105. </div>
  106. </body>
  107. </html>