无法在自定义dojo小部件内分配onclick事件

Question

我有一个自定义窗口小部件，其定义与此类似：

dojo.declare('myWidget', [dijit._WidgetBase, dijit._Templated],
{
    'templateString':'<span>' +
            '<a  dojoAttachPoint="linkNode" href="blah.php">' +
                '<img class="thumbNail" src="blahthumb.php" />' +
            '</a>' +
            '<h4 dojoAttachPoint="title" class="title">${blahtitle}</h4>' +
        '</span>',
    'stuff':null,
    'startup':function()
    {
        dojo.connect(this.linkNode, 'onclick', function(e){dojo.stopEvent(e);alert('hi');});
    }
});

如您所见，我试图在自定义窗口小部件的一部分上分配一个onclick事件。 我正在以编程方式创建小部件，并将其推到类似于以下内容的页面上：

...
    f = new myWidget(stuff);
    f.startup();    
    li = dojo.create('li', {'class':'thingy'});
    dojo.place(f.domNode, li);
    dojo.place(li, this.gallery); // within another widget,
...

不幸的是，在启动方法中连接的onclick事件没有触发。 我尝试以各种方式分配它，但似乎没有任何效果。

难道我做错了什么？

Answer 1

我不能肯定地说为什么您的案例不起作用，也许是因为您没有通过添加this.inherited(arguments);传播方法调用到启动this.inherited(arguments); 到方法的最后

但是，对于您的情况，我认为另一种方法可能更合适。 除了您显然知道的关于dojoAttachPoint的功能dojoAttachPoint ，dojo还具有dojoAttachEvent 。 我建议您改为执行以下操作：

dojo.declare('myWidget', [dijit._WidgetBase, dijit._Templated],
{
    'templateString':
        '<span>' +
            '<a dojoAttachEvent="onClick:_linkNodeClick" href="blah.php">' +
                '<img class="thumbNail" src="blahthumb.php" />' +
            '</a>' +
            '<h4 dojoAttachPoint="title" class="title">${blahtitle}</h4>' +
        '</span>',

    'stuff':null,

    '_linkNodeClick':function(e){
        dojo.stopEvent(e);
        alert('hi');
    }
});

编辑

Okey，我现在亲自尝试了一下，设法使它像这样工作：

dojo.provide("MyWidget");
dojo.declare('MyWidget', [dijit._Widget, dijit._Templated],
{
    'templateString':
        '<span>' +
            '<a dojoAttachPoint="linkNode">' +
                '<img class="thumbNail" src="blahthumb.php" />' +
            '</a>' +
            '<h4 dojoAttachPoint="title" class="title">${blahtitle}</h4>' +
        '</span>',

    'startup':function()
    {
        dojo.connect(this.linkNode, 'onclick', function(e){dojo.stopEvent(e);alert('hi');});
    }
});

而要启动它，我必须在调用启动之前将其附加到DOM。

var f = new MyWidget();
dojo.body().appendChild(f.domNode);
f.startup();

我从原始文件修改的唯一一件事就是添加了dojo.provide（...），但我不知道那是否真的很重要。 然后，我使用_Widget而不是_WidgetBase。 然后像我提到的那样更改顺序。 现在，当我单击该图像时，它会发出“ hi”警报，然后不跟随该链接。

Answer 2

我终于弄明白了。 这与我如何构建窗口小部件无关，因为我正在运行的功能会在窗口小部件运行后立即对其进行修改。 不确定为什么会导致onclick事件消失，但是它正在修改某些小部件的dom节点的innerHTML属性。 当我注释掉该部分时，一切工作都非常出色。