dojo小部件生命周期探究

 

       理解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下的控制台中的输出结果:


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属性即可,详见正确解析dojo的子小部件一文。

相关文章
相关标签/搜索