javascript - 自定义事件不会在 dojo 小部件上触发

标签 javascript events dojo

我有 dojo 自定义小部件。

我需要从自定义小部件发出一个事件, 这是我添加事件监听器的代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        var dojoConfig = {
            async: true,
            parseOnLoad: true,
            isDebug : true,
            packages:[
                {   name:"custom",
                    location:"/Test/js"
                }
            ]
        };
    </script>
    <script src="//localhost:8080/dojo1.9.0/dojo/dojo.js"></script>
</head>
<body>
<script>
    require(["custom/MyWidget","dojo/on","dojo/dom-construct","dojo/_base/window","dojo/domReady!"],function(MyWidget,on,domconstruct,window){
        var mywidget = new MyWidget();
        mywidget.startup();
        domconstruct.place(mywidget.domNode,window.body(),"after");


        on(mywidget,"customevent",function(data){
            console.log( " received notification "+data );
        });
    });
</script>
</body>
</html>

和下面的小部件

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_OnDijitClickMixin",
    "dijit/_TemplatedMixin",
    "dojo/text!./widget.html",
    "dojo/on",
    "dojo/_base/lang"
], function (declare, _WidgetBase, _OnDijitClickMixin, _TemplatedMixin, template,on,lang) {

    return declare([_WidgetBase, _OnDijitClickMixin, _TemplatedMixin], {
        templateString: template,
        //  your custom code goes here
        _onClick:function()
        {

        },

        postCreate : function ()
        {
            on(this.searchtextbox,"click",lang.hitch(this,"sendEvent"));

        },
        sendEvent : function(event)
        {
            console.log( "Click event in widget "+event );
            this.emit("customevent",event.x)
        }
    });

});

//Widget.html

<div class="${baseClass}" data-dojo-attach-point="searchtextbox">
    <p>
        here your widget
    </p>
</div>

问题是线路

this.emit("customevent",event.x) 抛出错误

最佳答案

小部件事件

您不应该使用 dojo/on 向小部件添加事件处理程序,它仅适用于 DOM 节点。如果你从 dijit/_WidgetBase 扩展(就像你做的那样),那么有一个方法叫做 on()你可以使用它,例如:

myWidget.on("customevent", function(data) {
    console.log( " received notification "+data );
});

小部件扩展点

我不确定 emit() 函数的作用,但问题似乎就在这里。根据the docs你应该只用简单的函数来编写你的扩展点。例如:

postCreate : function () {
    on(this.searchtextbox,"click",lang.hitch(this, "_onClick"));
},
_onClick: function(event) {
    // This is where you put your code
    console.log( "Click event in widget "+event );
    this.onCustomEvent(event.x);
},
onCustomEvent: function() {
     // This can be left empty, it will be used as the extension point
}

在这种情况下,您会将点击事件绑定(bind)到 _onClick() 函数,该函数又会使用正确的参数调用 onCustomEvent()。此函数供公共(public)使用,可用于绑定(bind)自定义事件处理程序。

这是 full example .

关于javascript - 自定义事件不会在 dojo 小部件上触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21848877/

相关文章:

javascript - 通过Javascript添加上述内容后发现内容已完全加载

javascript - 如何在jquery中附加返回值

javascript - 更新/修改从 dojo 数据存储/JsonRestStore 检索的对象

javascript - 在日历中显示有限的日子

javascript - === 是在哪个版本的 Javascript 中引入的?

javascript - 使用 Enquire.js 根据媒体查询切换功能

javascript - 交叉监听多个事件并触发回调

c# - 在 XAML 中为一个事件添加多个事件处理程序?

events - 如何弱订阅事件/可观察量

javascript - Dojo stackContainer 在调整窗口大小之前不显示子项