有人可以向我解释Dojo的“dojo / on”中究竟发生了什么模块？ [英] Could somebody explain to me what exactly is happening in the Dojo's ''dojo/on" module?

问题描述

我开始玩弄Dojo.js，遇到了一件我不明白的东西。

我正在尝试创建自己的小部件。小部件将非常简单 - 它只会查询页面上的所有图像，并使其听到点击事件。每次点击都会将小部件的计数器属性增加1。

这是我的承诺：

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $
$ b $
dijit / _TemplatedMixin，
dojo / text！myProject / folder / myWidgetTemplate.html，
]，
函数（声明，查询，_WidgetBase，_TemplatedMixin，模板）{
declare（MyWidget，[_WidgetBase，_TemplatedMixin]，{

templateString：template，
counter：0，

onClick：函数（evt）{
this.counter ++;
console.log（this.counter）;
}，

postCreate：function（）{
query（img）。on（click，this.onClick）;
}

}）;
}
）;

小部件初始化，我确实可以点击图像，但是控制台总是返回 undefined 的。
似乎我缺少关于 dojo / on 模块如何工作的核心方面。有人可以向我解释我的代码究竟发生了什么？

解决方案

在你的情况下， code>指向图像，属性 counter 是 undefined 。要实现这一点，您可以使用 dojo / base / lang 模块

  $（
 [
dojo / _base / declare，
dojo / _base / lang，//添加此
dojo / query，
 dijit / _WidgetBase，
dijit / _TemplatedMixin，
dojo / text！myProject / folder / myWidgetTemplate.html，
]，
 function（declare，lang，查询，_WidgetBase，_TemplatedMixin，模板）{
 declare（MyWidget，[_WidgetBase，_TemplatedMixin]，{
 
 templateString：template，
 counter：0，
 
 onClick：function（evt）{
 this.counter ++; 
 console.log（this.counter）; 
}，
 
 postCreate：function ）{
 //lang.hitch将返回一个新的函数，范围已更改
 query（img）。on（click，lang.hitch（this，this.onClick））; 
} 
 
}）; 
} 
）; 
  

lang.hitch 将返回一个新功能范围改变，所以当你使用这个它会指向想要你通过

你可以避免必须通过在html中声明事件来使用 lang ，例如

 < img src =myImage.jpgdata-dojo-attach-event =onClick：onClick/> 
  

其中 onClick：onClick 可以读为事件：functionName 和 functionName 必须存在于您的窗口小部件中。

注意，您可以使用本机

  query（img），rel =nofollow noreferrer> JavaScript的功能。 on（click，this.onClick.bind（this））; 
  

您可以检查此答案在外部回调访问这个，它不是关于dojo，而是一般的Javascript。

I started fiddling around with Dojo.js and came across a thing I don't understand.

I'm trying to create my own widget. The widget would be really simple - it would just query all images on the page and make them listen for a 'click' event. Each click would increase the widget's counter attribute by 1.

Here's my take on it:

define(
    [                   
        "dojo/_base/declare",
        "dojo/query",
        "dijit/_WidgetBase",
        "dijit/_TemplatedMixin",
        "dojo/text!myProject/folder/myWidgetTemplate.html",
    ],
    function(declare, query, _WidgetBase, _TemplatedMixin, template) {
        declare("MyWidget", [_WidgetBase, _TemplatedMixin], {

            templateString: template,
            counter: 0,

            onClick: function(evt) {
                this.counter++;
                console.log(this.counter);
            },

            postCreate: function() {
                query("img").on("click", this.onClick);
            }

        });
    }
);

The widget initializes and I indeed can click on images, but the console always returns undefined. It seems that I'm missing some core aspect about how the dojo/on module works. Could somebody explain to me what exactly happens in my code?

解决方案

In your case, this is pointing to the image, and the property counter is undefined. to accomplish this, you can use the dojo/base/lang module

define(
    [                   
        "dojo/_base/declare",
        "dojo/_base/lang", //add this
        "dojo/query",
        "dijit/_WidgetBase",
        "dijit/_TemplatedMixin",
        "dojo/text!myProject/folder/myWidgetTemplate.html",
    ],
    function(declare, lang, query, _WidgetBase, _TemplatedMixin, template) {
        declare("MyWidget", [_WidgetBase, _TemplatedMixin], {

            templateString: template,
            counter: 0,

            onClick: function(evt) {
                this.counter++;
                console.log(this.counter);
            },

            postCreate: function() {
                //lang.hitch will return a new function with scope changed
                query("img").on("click", lang.hitch(this, this.onClick));
            }

        });
    }
);

lang.hitch will return a new function with the scope changed, so when you use this it will be pointing to the want you passed

You can avoid having to use lang by declaring the event in the html, for example

<img src="myImage.jpg" data-dojo-attach-event="onClick: onClick"/>  

Where onClick: onClick can be read as event: functionName, and functionName must exist in your widget.

Note that you can do the same using the native bind function of JavaScript by just doing

query("img").on("click", this.onClick.bind(this));

You can checkout this answer access this on external callback it is not about dojo but Javascript in general.

这篇关于有人可以向我解释Dojo的“dojo / on”中究竟发生了什么模块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！