理解dojo小部件对于开发dojo的widget至关重要,dojo在绘制过程中主要存在以下几个过程：
constructor->postMixInProperties->buildRendering/templateString/templatePath->postCreate->startup，为了探究各个过程，做了一个简单的widget，并且该widget包含子小部件。
以下是子小部件的模板文件:
<div> <input dojoAttachPoint="name" type="text"></input> <span dojoAttachPoint="submit" dojoType="dijit.form.Button"> 提交 </span> </div>
以下是子小部件的js代码：
dojo.provide("iSpring.widgets.myFirstWidget.MyFirstWidget");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojo.cache");
dojo.declare("iSpring.widgets.myFirstWidget.MyFirstWidget",[dijit._Widget,dijit._Templated],{
_module:"iSpring.widgets.myFirstWidget",
templateString:dojo.cache("iSpring.widgets.myFirstWidget","templates/MyFirstWidget.html"),
widgetsInTemplate:true,
home:"China",
postMixInProperties:function(){
debugger;
console.log("postMixInProperties中的this.home:");
console.log(this.home);
console.log("postMixInProperties中的this.templateString:");
console.log(this.templateString);
console.log("postMixInProperties中的this.domNode:");
console.log(this.domNode);
console.log("postMixInProperties中的this.name:");
console.log(this.name);
console.log("postMixInProperties中的this.submit");
console.log(this.submit);
},
postCreate:function(){
debugger;
console.log("postCreate中的this.home:");
console.log(this.home);
console.log("postCreate中的this.templateString:");
console.log(this.templateString);
console.log("postCreate中的this.domNode:");
console.log(this.domNode);
console.log("postCreate中的this.name:");
console.log(this.name);
console.log("postCreate中的this.submit");
console.log(this.submit);
},
startup:function(){
debugger;
}
});
使用小部件的前端代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"/>
<meta name="charset" content="utf-8"/>
<title></title>
<script type="text/javascript">
dojoConfig = {
parseOnLoad:true,
baseUrl:'./',
modulePaths: { 'iSpring': 'iSpring' }
};
</script>
<script type="text/javascript" src="http://localhost/jsapi28/"></script>
<link type="text/css" rel="stylesheet" href="http://localhost/jsapi28/js/dojo/dijit/themes/claro/claro.css" />
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("iSpring.widgets.myFirstWidget.MyFirstWidget");
function init(){
var myFirstWidget = new iSpring.widgets.myFirstWidget.MyFirstWidget();
myFirstWidget.placeAt(dojo.body());
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
</body>
</html>
我在自定义的widget中设置了两个dojoAttachPoint：name和submit。
我们看一下在Chrome下的控制台中的输出结果：
650) this.width=650;" alt="" src="http://img.558idc.com/uploadfile/allimg/210615/1S6436356-1.png" d="1914214" s="af2_9e8" t="png">
postMixInProperties：我们可以从上面的输出结果中看到在postMixInProperties中已经可以访问小部件js文件中的各个属性，包括我们自定义的属性home以及dijit._Templated中的属性templateStirng,并输出了其相应的值。但此阶段不能访问在小部件的dom节点（this.domNode）以及模板文件中定义的dojoAttachPoint(this.name、this.submit)。当该方法被调用的时候，可以在该方法中完全访问与操作那些小部件js文件中定义的属性（比如自定的home属性）以及从父类中继承来的属性（比如dijit._Templated中的templateString属性），但是此时小部件的dom树海并不存在，也就是说不能访问this.domNode以及在模板文件中dojoAttachPoint。需要特别注意的是，此时虽然不能获得小部件的dom树，但是可以通过templateString=dojo.cache来获得小部件的模板文件，这个功能很有用，我们可以在此处动态的对模板字符串进行修改，比如动态的在该字符串中插入html字符串、删除html字符串、替换html字符串，这样就可以更新templateString,从而在解析小部件的时候呈现新的界面。比如我在postMixInProperties中设置this.templatetring="<div><input dojoAttachPoint='name' type='text' /><span dojoAttachPoint='submit' dojoType='dijit.form.Button'> 提交 </span><span dojoType='dijit.form.Button'> 提交 </span></div>";更新了原有的templateString，以下是运行后的界面：
650) this.width=650;" alt="" src="http://img.558idc.com/uploadfile/allimg/210615/1S6436356-1.png" d="1914215" s="47f_88d" t="png">
postCreate:我们从上面的输出结果可以看到在postCreate中不仅可以完全访问postMixInProperties中可以访问的内容，而且可以通过this.domNode访问小部件的dom树，以及通过this.dojoAttachPoint来访问模板文件中标记的dojoAttachPoint。而且需要注意的是，我在普通标签<input dojoAttachPoint="name" type="text"></input>上设置了name作为dojoAttachPoint，通过this.name获取的是该标签本身的dom节点。但是我在标签<span dojoAttachPoint="submit" dojoType="dijit.form.Button"> 提交 </span>上也设置了submit作为dojoAttachPoint，不同的是，该标签内还有dojoType=“dijit.form.Button”标记，我通过this.submit获取的不是该span标签本身的dom树，而是dijit.form.Button标签，如果想在这种轻快下访问span标签本身的dom节点，可以通过this.submit.domNode来获取。由此可以看出dojoAttachPoint会根据该标签是不是dijit小部件而获取不同的内容，很智能。大家还需要注意的一点是，有可能你在模板文件的标签<span dojoAttachPoint="submit" dojoType="dijit.form.Button"> 提交 </span>上设置了dojoType以及dojoAttachPoint，但是通过this.submit获取的仍然是span标签本身的dom节点而不是dijit.form.Button小部件，如果出现这种情况，说明你的自小部件在postCreate的时候没有解析出来，此时在小部件js代码中增加属性widgetsInTemplate：true属性即可,详见正确解析dojo的子小部件一文。