]> git.pond.sub.org Git - eow/blobdiff - static/dojo-release-1.1.1/dojox/dtl/demos/demo_Inline.html
add Dojo 1.1.1
[eow] / static / dojo-release-1.1.1 / dojox / dtl / demos / demo_Inline.html
diff --git a/static/dojo-release-1.1.1/dojox/dtl/demos/demo_Inline.html b/static/dojo-release-1.1.1/dojox/dtl/demos/demo_Inline.html
new file mode 100644 (file)
index 0000000..6e17d8e
--- /dev/null
@@ -0,0 +1,48 @@
+<html>
+       <head>
+               <title>Demo using dojox.dtl._HtmlTemplated inline in DOM</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.Context");
+
+                       dojo.addOnLoad(function(){
+                               // Create a template from our first node (still in DOM)
+                               var template = new dojox.dtl.HtmlTemplate("template");
+                               var context = new dojox.dtl.Context({
+                                       items: ["apple", "banana", "orange"]
+                               });
+                               // Render it first without initial item list
+                               template.render(context);
+
+                               // Create a template with our second node (removed from DOM)
+                               var node = dojo.byId("template2");
+                               node.parentNode.removeChild(node);
+                               var template2 = new dojox.dtl.HtmlTemplate(node);
+                               // The render function returns a buffer, which has the getRootNode function
+                               dojo.body().appendChild(template2.render(context).getRootNode());
+
+                               // The re-render each with a new item
+                               setTimeout(function(){
+                                       context.items.push("guava");
+                                       template.render(context);
+                                       template2.render(context);
+                               }, 3000);
+                       });
+               </script>
+       </head>
+       <body>
+               <ul id="template">
+                       {% for item in items %}
+                               <li>{{ item }}</li>
+                       {% endfor %}
+               </ul>
+
+               <ul id="template2">
+                       {% for item in items reversed %}
+                               <li>{{ item }}</li>
+                       {% endfor %}
+               </ul>
+       </body>
+</html>