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

   1 <html>
   2         <head>
   3                 <title>Demo using dojox.dtl._HtmlTemplated without Dijit</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.render.html");
   9                         dojo.require("dojox.dtl.Context");
  10
  11                         dojo.addOnLoad(function(){
  12                                 var context = new dojox.dtl.Context({
  13                                         items: ["apple", "banana", "orange"]
  14                                 });
  15
  16                                 var template = new dojox.dtl.HtmlTemplate("<ul><!--{% for item in items %}--><li><!--{{ item }}--></li><!--{% endfor %}--></ul>");
  17                                 // Render it plain
  18                                 var node = template.render(context).getRootNode();
  19                                 dojo.body().appendChild(node);
  20
  21                                 // Now show an example of how hard it is to manage stuff if the root node changes
  22                                 var template2 = new dojox.dtl.HtmlTemplate("<!--{% ifequal items.length 3 %}--><ul><!--{% for item in items %}--><li><!--{{ item }}--></li><!--{% endfor %}--></ul>{% else %}<div>More than 3 items!</div>{% endifequal %}");
  23                                 // Render it plain
  24                                 var node2 = template2.render(context).getRootNode();
  25                                 dojo.body().appendChild(node2);
  26
  27                                 // Now show how the HTML Render object makes this easier
  28                                 var renderer = new dojox.dtl.render.html.Render(dojo.byId("attach"), new dojox.dtl.HtmlTemplate("<!--{% ifequal items.length 3 %}--><ul><!--{% for item in items reversed %}--><li><!--{{ item }}--></li><!--{% endfor %}--></ul>{% else %}<div>More than 3 items!</div>{% endifequal %}"));
  29                                 renderer.render(context);
  30
  31                                 // Now re-render and break template2
  32                                 setTimeout(function(){
  33                                         context.items.push("guava");
  34                                         template.render(context);
  35                                         template2.render(context);
  36                                         renderer.render(context);
  37
  38                                         // This is what has to be done to fix template2
  39                                         setTimeout(function(){
  40                                                 var frag = template2.render(context).getRootNode();
  41                                                 node2.parentNode.replaceChild(frag, node2);
  42                                         }, 3000);
  43                                 }, 3000);
  44                         });
  45                 </script>
  46         </head>
  47         <body>
  48                 <div id="attach"></div>
  49         </body>
  50 </html>