summaryrefslogtreecommitdiff
path: root/includes/js/dojox/dtl/demos/demo_Inline.html
diff options
context:
space:
mode:
Diffstat (limited to 'includes/js/dojox/dtl/demos/demo_Inline.html')
-rw-r--r--includes/js/dojox/dtl/demos/demo_Inline.html48
1 files changed, 48 insertions, 0 deletions
diff --git a/includes/js/dojox/dtl/demos/demo_Inline.html b/includes/js/dojox/dtl/demos/demo_Inline.html
new file mode 100644
index 0000000..6e17d8e
--- /dev/null
+++ b/includes/js/dojox/dtl/demos/demo_Inline.html
@@ -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>