正确解析dojo的子小部件

v5qqbrowser

浏览: 359831 次

最近访客更多访客>>

wangtaoyou

SZKJR

yiduwangkai

zhangqinghao9203

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (704)

社区版块

存档分类

2013-01 ( 22)
2012-12 ( 72)
2012-11 ( 85)
更多存档...

在创建自定义的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。

分享到：