在创建自定义的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来判断是否模板文件中有自小部件,如果发现有就进行解析。