<html>
	<head>
		<title>Demo using dojox.dtl._DomTemplated without Dijit</title>
    <script type="text/javascript" src="../../../dojo/dojo.js"
			djConfig="isDebug: true"></script>
		<script type="text/javascript">
			dojo.require("dojox.dtl.dom");
			dojo.require("dojox.dtl.render.dom");
			dojo.require("dojox.dtl.Context");

			dojo.addOnLoad(function(){
				var context = new dojox.dtl.Context({
					items: ["apple", "banana", "orange"]
				});

				var template = new dojox.dtl.DomTemplate("<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.DomTemplate("<!--{% 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.dom.Render(dojo.byId("attach"), new dojox.dtl.DomTemplate("<!--{% 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>
