dojo onClick（）事件和javascript范围

Question

对于dojox/mobile/Button ，我需要对javascript中的函数范围以及onClick()事件做一些澄清。

正如文档所示：

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 require函数之外，我不能使用它的工具。

什么是正确的方法？

UPDATE

我不知道这是不是最好的方法，但这有效：

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 。

最常见的例子：

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或javascript的本机绑定来调整它。 阅读其他答案以获取更多信息。

另外，我建议阅读Understanding _WidgetBase