理解dojo小部件对于开发dojo的widget至关重要,dojo在绘制过程中主要存在以下几个过程：

constructor->postMixInProperties->buildRendering/templateString/templatePath->postCreate->startup，为了探究各个过程，做了一个简单的widget，并且该widget包含子小部件。

以下是子小部件的模板文件:

     
          
      
           
       
         提交 
       
      
     

以下是子小部件的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;    }});

使用小部件的前端代码如下：

    
         
             
     
              dojoConfig = {            parseOnLoad:true,            baseUrl:'./',            modulePaths: { 'iSpring': 'iSpring' }        };        
      
           
           
       
                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);    
        
       
      
     

我在自定义的widget中设置了两个dojoAttachPoint：name和submit。

我们看一下在Chrome下的控制台中的输出结果：

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，以下是运行后的界面：

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属性即可,详见一文。