dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
49 lines (45 loc) • 1.91 kB
HTML
<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>