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>