You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
2.0 KiB
50 lines
2.0 KiB
<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>
|
|
|