custom event is not triggered on dojo widget

2019-05-06 22:19发布

问题:

I have dojo Custom widget.

I need to emit a event from the custom widget, this the code where I have added the event listener

<!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>

and widget as below

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>

Problem is the line

this.emit("customevent",event.x) is throwing error

回答1:

Widget events

You should not use dojo/on to add event handlers to widgets, it's only for DOM nodes. If you extend from dijit/_WidgetBase (like you do), then there's a method called on() which you can use, for example:

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

Widget extension points

I'm not sure what the emit() function does, but it seems that here's the problem. According to the docs you should write your extension points just with plain functions. For example:

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
}

In this case you will bind the click event to the _onClick() function, which in turn calls onCustomEvent() with the correct arguments. This function is for public use and can be used to bind custom event handlers.

Here is the full example.



回答2:

Second param of emit method should be an object, but i was not sending object to it.

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