DojoX DTL 是 DTL(Django Template Language)
Dojo 实现版本
Neil Roberts 将 DTL 移植到 DojoX 中
并在 DTL 只支持文本基础上增加了对 HTML 元素支持DojoX DTL 完全实现了对 DTL 语法支持已有 Django 模板可以很容易地移植到 DojoX DTLDjango 项目介绍
Django是
款基于 Python 语言开源 Web 开发框架主要目是支持快速基于数据库 Web 开发使用 Django花极少时间即可构建和维护高质量 Web 应用DTL 是 Django 框架
模板系统语言DTL 语法简单提供了很好扩展性可以很容易地实现自定义标签(Tag)和过滤器(Filter)是 Django MVC 中重要组成部分使用模板个主要好处是将页面展示和业务处理逻辑分开模块的间松散耦合Web 界面设计人员和业务逻辑开发人员可以独立工作而不互相影响Django 模板系统
个 Django 模板是将文档数据和展示分离段文本模板定义了占位符和若干基本控制逻辑即标签标签控制了文档如何显示通常来说 Django 模板用来输出 HTML 文本但是 Django 模板也可以用来产生任何基于文本格式下面是
个公司感谢客户下订单例子模板如下:清单 1. DTL 举例
<html>
<head><title>Ordering notice</title></head>
<body>
<p>Dear {{ person_name }},</p>
<p>Thanks for placing an order from {{ company }}. It's scheduled to
ship on {{ ship_date|date:"F j, Y" }}.</p>
<p>Here are the items you've ordered:</p>
<ul>
{% for item in item_list %}
<li>{{ item }}</li>
{% endfor %}
</ul>
{% 
ordered_warranty %}
<p>Your warranty information will be 
d in the packaging.</p>
{% end %}
<p>Sincerely,<br />{{ company }}</p>
</body>
</html> 这个模板包含了基本
HTML 元素些变量和模板标签让我们逐个分析:变量:在“{{”和“}}”的间
文本如 {{ person_name }} 表示在当前位置输出变量 person_name 值块标签(block tag):在“{%”和“%}”的间
文本如 {% ordered_warranty %}块标签定义很宽泛只是告诉模板系统去执行些操作而具体做什么则由标签来决定上面例子定义了两个块标签{% for item in item_list %} 和 {% ordered_warranty %}分别使用了 for 标签和 标签for 标签定义了个简单循环对指定序列进行迭代 标签则是个条件判断如果 ordered_warranty 为真则显示 {% ordered_warranty %} 和 {% end %} 的间所有内容如果为假则不显示 标签也支持 {% 
%} 和其它逻辑表达式Django 模板系统定义了很多内建标签具体参见 其文档开发人员也可以创建自定义标签来扩展 Django 模板系统功能过滤器(filter):过滤器用来改变变量
显示方式如 {{ ship_date|date:"F j, Y" }} 表示对变量 ship_date 使用过滤器 date 后输出"F j, Y"是过滤器 date 参数指定了输出格式过滤器使用“|”符号即 Unix 管道符号Django 模板系统也定义了很多内建过滤器具体参见 其文档当然开发人员也可以创建自定义过滤器使用 DojoX DTL
DojoX DTL 包括文本和 HTML 两个实现
构造
分别为 dojox.dtl.Template 和 dojox.dtl.HtmlTemplate这两个构造都可以接受个
串或 URL 作为参数HTMLTemplate 也可以传入个 DOM 节点作为参数Template 只适用于文本
不能用它来操纵 DOM 节点但是我们可以用它来产生文本然后将生成文本作为某个 DOM 节点 innerHTMLHTMLTemplate 是 Template
扩展这就是说 HTMLTemplate 不仅支持所有 Template 操作还支持直接对 DOM 节点操作例如个节点位于 {% %} 块标签中如果 标签求值为真那么这个节点会被添加到 DOM 中如果 标签求值为假则这个节点将会从 DOM 中移除Hello Word
DojoX DTL
使用和 Django Template Language 类似首先创建个 Template 对象然后创建模板上下文信息(context可以理解为变量集合)最后将 context 作为参数
Template 对象 render 思路方法输出结果清单 2. Hello World
dojo.require("dojox.dtl");
dojo.require("dojox.dtl.Context");
var template = 
dojox.dtl.Template("Hello {{ place }}!");
var context = dojox.dtl.Context({
place: "World"
});
alert(template.render(context)); 上面
例子首先 dojox.dtl.Template 构造创建了个编译好模板对象 template该模板定义了对个变量 place 引用这个模板对象可以在以后随时被而不用每次都重新编译然后 dojox.dtl.Context 创建了上下文对象 context定义了 place 变量这时 template.render(context) 会输出“Hello World”前面提到 Template 只适用于文本
但是产生文本可以作为 DOM 节点 innerHTML为了方便这种类型应用Template 对象还有个 update 思路方法用来将模板输出文本作为个或多个节点 innerHTMLupdate 思路方法有两个参数第个是要更新节点引用、节点 ID 或是通过 dojo.query 返回节点列表第 2个参数类型是对象或是 URL作为模板上下文信息在 dojo.query 中使用 DTL
我们知道 dojo.query 返回
个 NodeList 对象通过这个对象可以很方便地操作查询返回结果集合通过引入 dojox.dtl.ext-dojo.NodeList我们可以将模板应用于 dojo.query 返回结果集合如下面例子:清单 3. dojo.query 中
模板使用 dojo.require("dojox.dtl.ext-dojo.NodeList");
dojo.query(".fruit").dtl("Fruit is: {{ fruit }}", { fruit: "apple" }); 我们可以
NodeList 对象 dtl 思路方法将第个参数作为模板第 2个参数作为上下文信息然后把模板输出结果作为 NodeList 中每个结果对象 innerHTMLdtl 思路方法参数同 Template 对象 update 思路方法使用 DojoX DTL 创建 widget
在创建自定义 widget
时候我们般会将 dijit._Widget 和 dijit._Templated 作为父类而通过 DojoX DTL 我们也能实现自定义 widget如下面例子:清单 4. widget 举例
dojo.require("dojox.dtl._Templated");
dojo.declare("demo", [dojox.dtl._Widget, dojox.dtl._Templated] {
templateString: "<div>I like eating {{ fruit }}</div>",
postCreate: function
{
this.fruit = "apple";
this.render;
}
}); 上面
例子使用了文本方式当然我们也可以使用 HTMLTemplate只要将 dojox.dtl._Templated 替换成 dojox.dtl._HtmlTemplated 即可同 dijit widget 样我们也可以使用 templatePathtemplateString 指定模板使用 dojoAttachPo
和 dojoAttachEvent 指定节点和 JavaScript 交互属性另外也可以为 render 思路方法指定 context否则会将当前 widget 对象作为 context下面例子介绍说明了如何用 dojox.dtl._HtmlTemplated 来创建 widget清单 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){
(e.keyCode 
dojo.keys.ENTER){
var i = dojo.indexOf(this.items, e.target.value);
(i != -1){
this.items.splice(i, 1);
}{
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 元素 _disibledevent=>在输入框中输入水果名字
如果该水果名字在列表中已经存在则从列表中删除该水果条目如果列表中不存在该水果则将该水果添加到列表中小结
在 Web 开发中使用模板可以将页面展示和业务处理逻辑分离
降低模块的间耦合从而使系统更灵活更能适应需求改变更易于维护DojoX DTL 完全实现了 Django 模板语言语法特性并增加了对 HTML DOM 节点支持本文简要介绍了 DTL 语法及 DojoX DTL 使用我们可以在 dojo.query 中或创建 widget以及在任何需要输出数据改变而格式不变地方使用 DojoX DTLDojoX DTL 还有很多特性如支持使用 DataStore 作为数据源支持自定义标签和 filter在开发中使用这些特性往往能起到事半功倍作用
最新评论