summaryrefslogtreecommitdiff
path: root/includes/js/dojox/dtl/demos/demo_Dijitless.html
blob: 2aaceaa3860b56120341939a5fec2f563daf0f5a (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<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>