我在自定义小部件中实例化一个dijit按钮.这一切都很好.在小部件代码中,我绑定了一个onclick事件处理程序,但是当我单击该按钮时,事件会触发两次.另外一个问题是它还将click事件绑定到页面中与窗口小部件无关的其他按钮.以下是我所拥有的简化版本.任何人都可以告诉我为什么这样做.我花了最后几个小时试图解决它.
代码如下,但您也可以在此处查看
这是实例化自定义窗口小部件的html页面
https://github.com/screenm0nkey/dojo/blob/master/widgets/destroy-widget.html
这是自定义小部件
https://github.com/screenm0nkey/dojo/blob/master/js/tag/widgets/DestroyWidget/Widget.js
这是包含嵌套小部件的模板
https://github.com/screenm0nkey/dojo/blob/master/js/tag/widgets/DestroyWidget/templates/template.html
这是小部件模板中的html;
<div style="border: solid 1px pink">
<h3>${name}</h3>
<div dojoType="dijit.form.Button" data-dojo-attach-point="removeBtn" class="removeBtn">
click me.
</div>
这是小部件中绑定处理程序的JavaScript;
define('tag/Widget',['dojo','dojo/parser','dijit/_Widget','dijit/_TemplatedMixin'],function(d,parser) {
return d.declare('tag.Widget',[dijit._Widget,dijit._TemplatedMixin],{
templateString : d.cache("tag","/templates/template.html"),widgetsInTemplate : true,name : 'no name',button : 'no button',postCreate : function() {
parser.parse(this.domNode);
this.placeAt(d.byId('authorContainer'));
},startup : function() {
dijit.registry.forEach(dojo.hitch(this,function(w) {
if (w.class === 'removeBtn') {
this.button = w;
return;
}
}))
this.button.connect('onclick',function(evt) {
console.log(evt.target);
});
},
});
});
这是控制台输出;
<input type="button" value="" class="dijitOffScreen" tabindex="-1" role="presentation" data-dojo-attach-point="valueNode"> <span class="dijitReset dijitInline dijitButtonText" id="dijit_form_Button_0_label" data-dojo-attach-point="containerNode">click me.</span>
解决方法
我不确切地知道你为什么会遇到问题,但我认为你可能已经避免了它,如果你使用更多的“Dojo风格”做事方式而不是你当前使用类导航的“JQuery风格”：
>尝试使用新的data-dojo属性而不是旧的dojoType样式：
<div data-dojo-type="dijit.form.Button" class="remove">
>使用显式附加点来引用内部小部件：
<div data-dojo-type="dijit.form.Button"
data-dojo-attach-point="removeBtn"
class="remove">
Click me
</div>
>附加点将设置主窗口小部件的属性.您可以通过它访问该按钮
dojo.connect(this.removeBtn,...
>使用onClick连接到小部件而不是onclick
dojo.connect(this.removeBtn,'onClick',function(){ ... });