This is a trial to embed the underscore template utility into Dojo toolkit.
define("myjs/Header",["dojo/_base/declare","dijit/_WidgetBase","dojo/text!./templates/header.html"],
function(declare, _WidgetBase,tpl){
return declare(‘myjs.Header‘,[_WidgetBase], {
render: function(context){
this.postMixInProperties();
var compiledTmpl = _.template(tpl, { citys : ["BeiJing","ShangHai","ShenZhen"] });
this.srcNodeRef.innerHTML = compiledTmpl;
},
buildRendering: function(){
this.render();
},
postMixInProperties: function(){
this.inherited(arguments);
}
});
});
<ul>
<% for (var i = 0; i < citys.length; i++) { %>
<% var city= citys[i]; %>
<li>
<em><%= city %></em>
</li>
<% } %>
</ul>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dojo Application</title>
<link rel="stylesheet" href="myjs/resources/main.css">
<script src="http://underscorejs.org/underscore-min.js"></script>
</head>
<body class="claro">
<div id="page">
<div id="header">
<div id="nav"></div>
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
<script src="dojoConfig.js"></script>
<script src="dojo/dojo.js"></script>
<script type="text/javascript">
if(require){
require(["myjs/Header","dojo/domReady!"],function(Header){
var options = {};
var header = new Header(options,"nav");
header.startup();
});
}
</script>
</body>
</html>