+++ /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