参考:http://niweiwei.iteye.com/blog/1539863
http://dojotoolkit.org/reference-guide/1.8/dijit/_TemplatedMixin.html
http://thoughtfly.iteye.com/blog/1489620
准备开始
Dijit’s的_Widget和_WidgetBase胃创建widgets提供了一个极好的基础,但是_Templated的混合特性是Dijit真正出众的地方。用_TemplatedMixin,你可以快速创建高度可维护性、快速维护性和易操作的widgets。
_TemplatedMixin的基础概念是足够简单的:它允许开发者去创建一个带有一些小扩展的小HTML文件,在运行时加载这个HTML文件作为一个字符串,它被模板Widget的所有实例重用。
让我们穿行_TemplatedMixin所定义的(为什么),然后用它的功能从头开始建造一个widget。
_TemplatedMixin所提供的
对工作开发者来说,把_TemplatedMixin混合进一个widget定义,因为要用外部的模板,这里值讨论下面这个一个属性:
templateString,// a string representing the HTML of the template
用_TemplatedMixin
为了确保你自定义的widget是"templatable",所有你需要做的是为你的widget增加"dijit/_Templated"作为类声明数组的第二个参数。
例如,一个SomeWidget的widget可能会像这样声明:
require([
"dojo/_base/declare"
,
"dijit/_Widget"
,
"dijit/_dijit/_TemplatedMixin"
,
"dojo/text!./templates/SomeWidget.html"
],
function
(declare, _Widget, _Templated, template) {
return
declare(
"example.SomeWidget"
, [_Widget, _Templated], {
templateString: template
// your custom code goes here
});
});
注意:Dijit依附一个标准,通过在JavaScript声明的同一层级创建一个叫做"templates"的单独目录——我们建议你在你自己的代码中遵循此标准。
注意在上面我们的声明中,我们用templateString属性与一个模板相连,此模板通过dojo/text!{path}来加载。这是设置引用到你模板文件的推荐方式,因为它确保了文件能够被异步加载和当创建一个Dojo工具箱的构建时能适度整合。
现在我们基于模板来建立我们的widget声明。让我们写一个模板和讨论一些特别在他们中可用的hooks。
写模板
一个模板就是一个HTML文档碎片,在里面你定义一个DOM结构,伴随任意特别的”hooks“,把事物返回到你的widget声明里。在我们投入到这些hooks中的每一个之前,看一个快速的例子,在一个模板里变量替换如何发生。这里是我们的SomeWidget的假想模板:
div
class
=
"${baseClass}"
data-dojo-attach-point
=
"focusNode"
data-dojo-attach-event
=
"ondijitclick:_onClick"
role
=
"menuitem"
tabindex
=
"-1"
>
<
span
data-dojo-attach-point
=
"containerNode"
></
span
>
</
div
>
在简单的同事,这个模板展示了Dijit模板系统三个最重要的方面:变量替换、附着点、事件附着
注意:当你定义一个模板的时候,只能有一个根节点定义(就像XML文档)。在顶层的多节点是不被允许的。
变量替换
附着点
一般的,你模板的根节点变成你widget的domNode属性,因此一般在定义里不需要包含一个附着点属性。然而,有时候,在Dijit里这么做是允许跟节点也可以和其他子系统进行作用,诸如Dijit的焦点管理。
事件附着
除了附着点之外,Dijit模板系统给你提供了一个把native 的DOM事件附着到你自定义widget里方法的方式。它通过使用
HTML5数据属性data-dojo-attach-event来实现。这是一个逗号隔开的键/值对(用冒号分割)字符串,键是附着控制器的native DOM事件,值是当事件发生时,你的widget需要执行的方法的名字。如果仅有一个单一的事件需要去控制,忽略最后的逗号。例如,这个是定义在Dijit MenuBarItem里的dojo-data-attach-event属性:
data-dojo-attach-event="onmouseenter:_onHover,onmouseleave:_onUnhover,ondijitclick:_onClick"
注意:我们定义在我们例子模板中的事件,ondijitclick,是由Dijit自己设置的一个修饰handler,支持额外的东西,一个普通的onclick事件
不需要捕获。一般来说,你可以在任何你想正常使用onclick的地方使用它
当你widget已经实例化,DOM碎片已经从你的模板创建,Dijit模板系统将会贯穿任意的事件定义,自动地从作为结果的DOM和你的widget对象中连接这些事件(用connect)——使得它难以置信的简单去连接你的可视化表现和你的控制代码。另外,当这些事件控制器fired时,一般的,由native DOM事件机制传递的同样的参数将会沿着你的widget控制器传递,因此你有充分的访问报告的权利。
关于domNode和srcNode: