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

   1 <html>
   2         <head>
   3                 <title>Demo using dojox.dtl._HtmlTemplated inline in DOM</title>
   4     <script type="text/javascript" src="../../../dojo/dojo.js"
   5                         djConfig="isDebug: true"></script>
   6                 <script type="text/javascript">
   7                         dojo.require("dojox.dtl.html");
   8                         dojo.require("dojox.dtl.Context");
   9
  10                         dojo.addOnLoad(function(){
  11                                 // Create a template from our first node (still in DOM)
  12                                 var template = new dojox.dtl.HtmlTemplate("template");
  13                                 var context = new dojox.dtl.Context({
  14                                         items: ["apple", "banana", "orange"]
  15                                 });
  16                                 // Render it first without initial item list
  17                                 template.render(context);
  18
  19                                 // Create a template with our second node (removed from DOM)
  20                                 var node = dojo.byId("template2");
  21                                 node.parentNode.removeChild(node);
  22                                 var template2 = new dojox.dtl.HtmlTemplate(node);
  23                                 // The render function returns a buffer, which has the getRootNode function
  24                                 dojo.body().appendChild(template2.render(context).getRootNode());
  25
  26                                 // The re-render each with a new item
  27                                 setTimeout(function(){
  28                                         context.items.push("guava");
  29                                         template.render(context);
  30                                         template2.render(context);
  31                                 }, 3000);
  32                         });
  33                 </script>
  34         </head>
  35         <body>
  36                 <ul id="template">
  37                         {% for item in items %}
  38                                 <li>{{ item }}</li>
  39                         {% endfor %}
  40                 </ul>
  41
  42                 <ul id="template2">
  43                         {% for item in items reversed %}
  44                                 <li>{{ item }}</li>
  45                         {% endfor %}
  46                 </ul>
  47         </body>
  48 </html>