dojo onClick() 事件和 javascript 作用域

Question

我需要澄清一下函数在 javascript 中的作用域和onClick() 事件，对于dojox/mobile/Button。

如文档所示：

https://dojotoolkit.org/reference-guide/1.10/dojox/mobile/Button.html

我使用函数调用而不是内联编写它来执行以下操作：

html

button.mblSimpleDialogButton(data-dojo-type="dojox/mobile/Button" data-dojo-props="label: 'Ok', onClick:foo()" style="width:60%;")

js

script(type="text/javascript").
    require([
        "dojo/on",
        "dijit/registry",
        "dojo/domReady!"
    ], function (on, registry) {
        function foo() {
            // do something
        }
    });

它不起作用，因为（据我所知）foo() 是在另一个函数中定义的，因此它的范围仅限于该函数。

但是如果我将foo() 放在全局级别，比如说：

script(type="text/javascript").
    require([
        "dojo/on",
        "dijit/registry",
        "dojo/domReady!"
    ], function (on, registry) {
    });
    function foo() {
        // do something
    }

我收到类型错误，因为dojo 找不到处理程序：

TypeError: this.onClick 不是函数

最后，使用标准 html 引导处理程序工作：

button.mblSimpleDialogButton(data-dojo-type="dojox/mobile/Button" data-dojo-props="label: 'Procedi'" onClick="foo()" style="width:60%;")

但是因为foo() 不在dojo 要求的功能范围内，所以我不能使用它的工具。

正确的做法是什么？

更新

我不知道这是否是最好的方法，但这可行：

html

button#myBtn.mblSimpleDialogButton(data-dojo-type="dojox/mobile/Button" data-dojo-props="label: 'Ok'" style="width:60%;")

js

var myBtn = dom.byId("myBtn");
on(myBtn, "click", function (e) {
    console.log("clicked!");
});

Answer 1

data-dojo-props 将用于Widgets with templates，即使您可以以其他方式使用它。

最常见的例子：

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin"
], function(declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin) {

    return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
        templateString: '<button data-dojo-type="dojox/mobile/Button"' + 
            'data-dojo-props="onClick:myOnClick">My Button</button>',

        myOnClick: function(/*Event*/ evt) {
            console.log('Hello click');
        }
    });
});

以这种方式使用它，this 将成为您的widget，您可以使用您需要的任何dojo 模块或您的小部件的任何function/property。

另一种方法是在您的问题中使用模块dojo/on，但是，请注意该功能的范围将改变它，因此您需要使用dojo/_base/lang 或本机bind 对其进行调整的JavaScript。阅读此other answer 了解更多信息。

另外我推荐阅读Understanding _WidgetBase