DojoX DTL 入门

核心提示： 在 dojo.query 中使用 DTL我们知道 dojo.query 返回一个 NodeList 对象，通过这个对象可以很方便地操作查询返回的结果集合，DojoX DTL 入门(4)，通过引入 dojox.dtl.ext-dojo.NodeList，我们可以将模板应用于 dojo.query

在 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 方法，将第一个参数作为模板，第二个参数作为上下文信息，然后把模板的输出结果作为 NodeList 中每个结果对象的 innerHTML。dtl 方法的参数同 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 一样，我们也可以使用 templatePath，templateString 指定模板，使用 dojoAttachPoint 和 dojoAttachEvent 指定节点与 JavaScript 交互的属性。另外也可以为 render 方法指定 context，否则会将当前的 widget 对象作为 context。下面的例子说明了如何用 dojox.dtl._HtmlTemplated 来创建 widget。