--- /dev/null
+<html>
+ <head>
+ <title>Demo using dojox.dtl._HtmlTemplated without Dijit</title>
+ <script type="text/javascript" src="../../../dojo/dojo.js"
+ djConfig="isDebug: true"></script>
+ <script type="text/javascript">
+ dojo.require("dojox.dtl.html");
+ dojo.require("dojox.dtl.render.html");
+ dojo.require("dojox.dtl.Context");
+
+ dojo.addOnLoad(function(){
+ var context = new dojox.dtl.Context({
+ items: ["apple", "banana", "orange"]
+ });
+
+ var template = new dojox.dtl.HtmlTemplate("<ul><!--{% for item in items %}--><li><!--{{ item }}--></li><!--{% endfor %}--></ul>");
+ // Render it plain
+ var node = template.render(context).getRootNode();
+ dojo.body().appendChild(node);
+
+ // Now show an example of how hard it is to manage stuff if the root node changes
+ 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 %}");
+ // Render it plain
+ var node2 = template2.render(context).getRootNode();
+ dojo.body().appendChild(node2);
+
+ // Now show how the HTML Render object makes this easier
+ 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 %}"));
+ renderer.render(context);
+
+ // Now re-render and break template2
+ setTimeout(function(){
+ context.items.push("guava");
+ template.render(context);
+ template2.render(context);
+ renderer.render(context);
+
+ // This is what has to be done to fix template2
+ setTimeout(function(){
+ var frag = template2.render(context).getRootNode();
+ node2.parentNode.replaceChild(frag, node2);
+ }, 3000);
+ }, 3000);
+ });
+ </script>
+ </head>
+ <body>
+ <div id="attach"></div>
+ </body>
+</html>
projects / eow / blobdiff