Question

我开始摆弄Dojo.js并遇到了一件我不理解的事情。

我正在尝试创建自己的小部件。小部件非常简单 - 只需查询页面上的所有图像，并让他们听取＆＃39; 事件。每次点击都会将小部件的计数器属性增加1。

这是我的看法：

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

        });
    }
);

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

Answer 1

在您的情况下，this指向image，属性counter为undefined。为此，您可以使用dojo/base/lang模块

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将返回一个更改范围的新函数，因此当您使用this时，它将指向您希望传递的内容

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

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

其中onClick: onClick可以被理解为event: functionName，并且您的小部件中必须存在functionName。

注意您可以使用JavaScript的本地bind function执行相同操作

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

你可以查看这个答案access this on external callback它不是关于dojo而是Javascript。

有人可以向我解释一下Dojo＆＃39;＆＃39; dojo / on＆＃34;模块？

1 个答案: