DojoX DTL 入门
2009-11-18 00:00:00 来源：WEB开发网
清单 5. HTML 模板示例<html>
<head>
<title>dojo.DTL Demo</title>
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.dijit");
dojo.require("dojox.dtl._HtmlTemplated");
dojo.require("dojo.parser");
dojo.declare("Fruit", [dijit._Widget, dojox.dtl._HtmlTemplated], {
oldRepl: "Fruit: ",
items: ["apple", "banana", "orange"],
keyUp: function(e){
if(e.keyCode == dojo.keys.ENTER){
var i = dojo.indexOf(this.items, e.target.value);
if(i != -1){
this.items.splice(i, 1);
}else{
this.items.push(e.target.value);
}
e.target.value = "";
this.render();
dojo.query("input", this.domNode).forEach("item.focus();");
}
},
templateString: '<div><input dojoAttachEvent="onkeyup: keyUp">
<ul>{% for item in items %}<li>{{oldRepl}} {{ item }}</li>{% endfor %}</ul>
</div>'
});
</script>
</head>
<body>
<div dojoType="Fruit"></div>
</body>
</html>
首先创建了 widget 类 Fruit，定义了变量 oldRepl 和数据 items，以及 keyUp 函数，这个函数通过 dojoAttachEvent 与模板里的 input 元素的 onkeyup 事件绑定。在 templateString 里定义了一个输入框和一个列表，通过 for 标签输出水果列表。
在浏览器里打开该文件，显示效果如下：
图 1. HTML 模板示例效果图
在输入框中输入水果名字，如果该水果名字在列表中已经存在，则从列表中删除该水果条目。如果列表中不存在该水果，则将该水果添加到列表中。
小结
在 Web 开发中使用模板可以将页面展示和业务处理逻辑分离，降低模块之间的耦合，从而使系统更灵活，更能适应需求的改变，更易于维护。DojoX DTL 完全实现了 Django 模板语言的语法特性，并增加了对 HTML DOM 节点的支持。本文简要介绍了 DTL 的语法及 DojoX DTL 的使用，我们可以在 dojo.query 中或创建 widget，以及在任何需要输出数据改变而格式不变的地方使用 DojoX DTL。DojoX DTL 还有很多特性，如支持使用 DataStore 作为数据源，支持自定义标签和 filter，在开发中使用这些特性往往能起到事半功倍的作用。
中查找“DojoX DTL 入门”更多相关内容
中查找“DojoX DTL 入门”更多相关内容更多精彩
赞助商链接
