49 lines
1.4 KiB
HTML
49 lines
1.4 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Demo using dojox.dtl._HtmlTemplated inline in DOM</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.Context");
|
||
|
|
|
||
|
|
dojo.addOnLoad(function(){
|
||
|
|
// Create a template from our first node (still in DOM)
|
||
|
|
var template = new dojox.dtl.HtmlTemplate("template");
|
||
|
|
var context = new dojox.dtl.Context({
|
||
|
|
items: ["apple", "banana", "orange"]
|
||
|
|
});
|
||
|
|
// Render it first without initial item list
|
||
|
|
template.render(context);
|
||
|
|
|
||
|
|
// Create a template with our second node (removed from DOM)
|
||
|
|
var node = dojo.byId("template2");
|
||
|
|
node.parentNode.removeChild(node);
|
||
|
|
var template2 = new dojox.dtl.HtmlTemplate(node);
|
||
|
|
// The render function returns a buffer, which has the getRootNode function
|
||
|
|
dojo.body().appendChild(template2.render(context).getRootNode());
|
||
|
|
|
||
|
|
// The re-render each with a new item
|
||
|
|
setTimeout(function(){
|
||
|
|
context.items.push("guava");
|
||
|
|
template.render(context);
|
||
|
|
template2.render(context);
|
||
|
|
}, 3000);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<ul id="template">
|
||
|
|
{% for item in items %}
|
||
|
|
<li>{{ item }}</li>
|
||
|
|
{% endfor %}
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<ul id="template2">
|
||
|
|
{% for item in items reversed %}
|
||
|
|
<li>{{ item }}</li>
|
||
|
|
{% endfor %}
|
||
|
|
</ul>
|
||
|
|
</body>
|
||
|
|
</html>
|