43 lines
1.6 KiB
HTML
43 lines
1.6 KiB
HTML
<html>
|
|
<head>
|
|
<title>Demo using dojox.dtl._Templated</title>
|
|
<script type="text/javascript" src="../../../dojo/dojo.js"
|
|
djConfig="async: true, isDebug: true, parseOnLoad: true"></script>
|
|
<script type="text/javascript">
|
|
require(['dojox/dtl/ext-dojo/NodeList',
|
|
'dojox/dtl/Context',
|
|
'dojo/query',
|
|
'dojo/dom',
|
|
'dojo/parser',
|
|
'dojo/domReady!',
|
|
'dojox/dtl/tag/logic'],
|
|
function(NodeList, Context, query, dom){
|
|
|
|
// First, look at the NodeList extension
|
|
query(".fruit").dtl(require.toUrl("dojox/dtl/demos/templates/nodelist.html"), { items: ["apple", "banana", "pear"] });
|
|
|
|
query(".fruit2").dtl("<div><ul>{% for item in items %}<li>{{ item }}</li>{% endfor %}</ul></div", { items: ["apple", "banana", "pear"] });
|
|
|
|
// Now, create a real template object
|
|
var tpl = new dojox.dtl.Template(require.toUrl("dojox/dtl/demos/templates/nodelist.html"));
|
|
|
|
// And test its update function with a dojo.query
|
|
tpl.update(query(".update"), require.toUrl("dojox/dtl/demos/json/fruit.json"));
|
|
|
|
setTimeout(function(){
|
|
// And now test it with an ID reference
|
|
tpl.update("updateId", require.toUrl("dojox/dtl/demos/json/morefruit.json"));
|
|
// And throw in a standard rendering just for fun
|
|
dom.byId("updateId2").innerHTML = tpl.render(new dojox.dtl.Context({ items: ["pineapple", "orange", "tomato"] }));
|
|
}, 5000);
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="fruit"></div>
|
|
<div class="fruit2"></div>
|
|
<div class="update" id="updateId"></div>
|
|
<div class="update" id="updateId2"></div>
|
|
</body>
|
|
</html>
|