正确解析dojo的子小部件

在创建自定义的dojo小部件的时候经常要使用模板文件，如果我们创建的小部件中内还有子小部件，那么我就需要在自定义的widget的模板文件中声明式的添加子小部件。下面我创建一个自定义的包含自小部件的widget。

创建的小部件比较简单，以下是小部件的模板文件：

<div>
    <span 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")
});

以下是使用自定义小部件的前端代码：

<!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>

然后将网站发布，通过localhost的方式访问页面，结果如下：

发现我们创建的widget中的子小部件dijit.form.Button没有正确解析，样式不正确，只是显示了其中的文字内容，我在Chrome中打开Developer Tools查看其解析后的内容如下：

我们看到<span dojotype="dijit.form.Button">按钮控件</span>中并没有自动生成widgetid等属性，也就是说子小部件dijit.form.Button确实没有被dojo解析。

解决这个问题的方法是，在我们自定义小部件的MyFirstWidget.js文件中加入一个widgetsInTemplate属性，其值为true，如下图所示：

然后刷新页面，刷新后的页面如下：

可以看到子小部件dijit.form.Button已经正确解析。

widgetsInTemplate是dijit._Templated中的属性，表示模板文件中是否含有子小部件，该属性默认值为false，也就是说默认情况下dojo是不会解析模板文件中声明的子小部件的，只是会将其作为一般的html予以显示，要想将子小部件正确解析为widget，必须将widgetsInTemplate属性设置为true。

需要注意的是使用widgetsInTemplate 时可能会有额外的开销，可能会影响你的widget的性能，甚至整个页面的性能。如果你创建的widget中并没有自小部件，那么不用设置widgetsInTemplate属性或者将其设置为false。

后记：有时候即使进行了上述操作，结果还是没有正确解析小部件，比如我的模板文件中声名式的写了一个TabContainer，内容如下：

<div class="root">
                <div dojoType="dijit.layout.TabContainer" doLayout="false" controllerWidget="dijit.layout.TabController">
                    <div dojoType="dijit.layout.ContentPane" title="选项一">
                        <span>选项一内容</span>
                    </div>
                    <div dojoType="dijit.layout.ContentPane" title="选项二">
                        <span>选项二内容</span>
                    </div>
                </div>
            </div>

那么按照上面的方法进行操作的时候还是不能正确解析TabContainer，这时需要对其添加doLayout="false"和controllerWidget="dijit.layout.TabController"，然后调用小部件的startup方法即可，在startup方法中小部件会根据是否有templatesInWidget来判断是否模板文件中有自小部件，如果发现有就进行解析。

正确解析dojo的子小部件

猜你在找的Dojo相关文章