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);来将方法调用传播到启动。

但是，在您的情况下，我认为另一种方法可能更合适。除了你明显知道的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');
    }
});

修改

好吧，我现在自己尝试了，并设法让它像这样工作：

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');});
    }
});

并且nto启动它，我必须在调用启动之前将它附加到DOM。

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

我从原版中修改的唯一内容是添加dojo.provide（...），我不知道这是否真的很重要。然后我使用_Widget而不是_WidgetBase。然后也像我提到的那样改变顺序。现在，当我点击图像时，它会提示“hi”，然后不会跟踪链接。

Answer 2

我终于明白了。它与我如何构建窗口小部件无关，因为我正在运行的一个函数会在它运行后立即修改它。不确定为什么它会导致onclick事件消失，但它正在修改某些小部件的dom节点的innerHTML属性。当我评论这一部分时，一切都很有效。

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

2 个答案:

修改