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
|
<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">
dojo.require("dijit._WidgetBase");
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._WidgetBase, 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 %} ↵{% else %}<ul>{% for country in country.children %}{% include countrychildren %}{% endfor %}</ul>{% endif %}{% endif %}</li>'
});
})();
</script>
</head>
<body>
<div dojoType="demo.Tree"></div>
</body>
</html>
|
