<html>
	<head>
			<title>Demo to show recursion in DTL</title>
			<script type="text/javascript" src="../../../dojo/dojo.js"
				djConfig="isDebug: true, parseOnLoad: true"></script>
			<script type="text/javascript" src="../../../dijit/dijit.js"></script>
			<script type="text/javascript">
					dojo.require("dojox.dtl._DomTemplated");
					dojo.require("dojo.data.ItemFileReadStore");
					dojo.require("dojo.parser");

					(function(){
						var data = {};

						// The only way to get ItemFileReadStore to work
						// synchronously (necessary for the bind_query format
						// we'll be using below) at the time of this writing
						// was to feed it data
						dojo.xhrGet({
							url: dojo.moduleUrl("dijit.tests._data", "countries.json"),
							handleAs: "json",
							sync: true,
							load: function(json){
								data = json;
							}
						});

						dojo.declare("demo.Tree", [dijit._Widget, dojox.dtl._DomTemplated], {
							constructor: function(){
								this.disabled = {};
							},
							toggle: function(e){
								var dataid = dojo.attr(e.target, "dataid");
								this.disabled[dataid] = !this.disabled[dataid];
								this.render();
							},
							store: new dojo.data.ItemFileReadStore({ data: data }),
							query: { type: "continent" },
							templateString: '{% load dojox.dtl.contrib.objects %}{% load dojox.dtl.contrib.data %}{% bind_query query to store as countries %}<ul dojoAttachEvent="onclick: toggle">{% for country in countries %}{% include countrychildren %}{% endfor %}</ul>',
							countrychildren: '<li dataid="{{ country.getIdentity }}">{{ country.type }}: {{ country.name }}{% if country.children %}{% if disabled|key:country.getIdentity %} &crarr;{% else %}<ul>{% for country in country.children %}{% include countrychildren %}{% endfor %}</ul>{% endif %}{% endif %}</li>'
						});
					})();
			</script>
	</head>
	<body>
		<div dojoType="demo.Tree"></div>
	</body>
</html>