git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/dtl/demos/demo_NodeList.html

   1 <html>
   2         <head>
   3                 <title>Demo using dojox.dtl._Templated</title>
   4     <script type="text/javascript" src="../../../dojo/dojo.js"
   5                         djConfig="isDebug: true, parseOnLoad: true"></script>
   6                 <script type="text/javascript">
   7                         dojo.require("dojox.dtl.ext-dojo.NodeList");
   8                         dojo.require("dojox.dtl.Context");
   9
  10                         dojo.addOnLoad(function(){
  11                                 // First, look at the NodeList extension
  12                                 dojo.query(".fruit").dtl(dojo.moduleUrl("dojox.dtl.demos.templates", "nodelist.html"), { items: ["apple", "banana", "pear"] });
  13
  14                                 dojo.query(".fruit2").dtl("<div><ul>{% for item in items %}<li>{{ item }}</li>{% endfor %}</ul></div", { items: ["apple", "banana", "pear"] });
  15
  16                                 // Now, create a real template object
  17                                 var tpl = new dojox.dtl.Template(dojo.moduleUrl("dojox.dtl.demos.templates", "nodelist.html"));
  18
  19                                 // And test its update function with a dojo.query
  20                                 tpl.update(dojo.query(".update"), dojo.moduleUrl("dojox.dtl.demos.json", "fruit.json"));
  21
  22                                 setTimeout(function(){
  23                                         // And now test it with an ID reference
  24                                         tpl.update("updateId", dojo.moduleUrl("dojox.dtl.demos.json", "morefruit.json"));
  25                                         // And throw in a standard rendering just for fun
  26                                         dojo.byId("updateId2").innerHTML = tpl.render(new dojox.dtl.Context({ items: ["pineapple", "orange", "tomato"] }));
  27                                 }, 5000);
  28                         });
  29                 </script>
  30         </head>
  31         <body>
  32                 <div class="fruit"></div>
  33                 <div class="fruit2"></div>
  34                 <div class="update" id="updateId"></div>
  35                 <div class="update" id="updateId2"></div>
  36         </body>
  37 </html>