Dojo - 监听 Widget 中的 DOM dijit/form/button 点击事件答案

【问题标题】：Dojo - Listen for DOM dijit/form/button click event within WidgetDojo - 监听 Widget 中的 DOM dijit/form/button 点击事件
【发布时间】：2013-07-03 15:12:56
【问题描述】：

我正在将小部件添加到 ERSI 地图查看器项目中，该项目可在此 link 中找到。

所以我制作了一个带有 dijit/form/button 的查询小部件，并希望实现一个 dojo/on 事件监听器来监听它的点击事件。

按钮在 html 标记中声明为：

<button data-dojo-type="dijit.form.Button" id="searchButton" type="button">Submit</button>

在我的 JavaScript 中，在 postCreate 函数的末尾我有：

on(dojo.byId("searchButton"), "click", function execute() {
    // Set the WHERE search text
    this.findParams.searchText = dojo.byId("searchText").value;
    // Sends a request to the ArcGIS REST map service resource to perform a search based
    // on the FindParameters specified in the findParameters argument. On completion, the
    // onComplete event is fired and the optional callback function is invoked.
    this.findTask.execute(this.findParams, this.showResults, this.showError);
});

我收到一个 TypeError：_526 为空。这个错误似乎可以忽略不计，因为我知道我做错了。除了上面的代码，我尝试了几十个其他代码，没有任何效果。

我为dojo/on 找到的所有示例都没有显示如何执行此特定应用程序。

我对 dojo 还是很陌生，我只是在这个项目上，直到我可以解决另一个同事遇到的一些问题，但是如果有人可以给我展示一个示例或链接到一个示例来说明如何聆听小部件中的 DOM dijit 事件将不胜感激。

回答后更新代码：

我稍微修改了代码，如果下一个人觉得有用的话：

on(this.submitButton, 'click', lang.hitch(this, 'execute'));

其中 execute 与之前列出的函数相同，但为了使这一行更简洁。

【问题讨论】：

标签： dom widget dojo event-listener

【解决方案1】：

我假设您的查询小部件是模板化小部件，并且还混合在 WidgetsInTemplateMixin 中。

http://dojotoolkit.org/reference-guide/1.9/dijit/_TemplatedMixin.html#dijit-templatedmixin

http://dojotoolkit.org/reference-guide/1.9/dijit/_WidgetsInTemplateMixin.html#dijit-widgetsintemplatemixin

您发布的 html 在小部件模板中。您最好的选择是不使用 id。通过使用 id，您将只能在页面上拥有这些小部件之一。这对于您的用例可能没问题，但不是一个好习惯。请改用data-dojo-attach-point。

<div>
    ... MORE HTML...
    <button data-dojo-type="dijit.form.Button" 
        data-dojo-attach-point="submitButton" type="button">Submit</button>
</div>

然后，您可以在您的代码中引用submitButton 作为小部件的变量。

on(this.submitButton, "click", function execute() {
    ...
}

【讨论】：

您好，感谢您的评论。这是我发布问题时的错误。该代码实际上使用了您突出显示的正确 html 代码。更新了问题以反映这一点。
你是对的，它是一个模板化的小部件，可以混合 WidgetsInTemplateMixin。您的答案很准确，而且效果很好。也感谢您的解释。
+1 对我来说...我没有意识到 html 实际上是在小部件模板中。我留下了我的答案，因为它可能会添加一些信息......

【解决方案2】：

由于您的按钮本身是一个小部件，因此您不需要 dojo/on 来拦截点击事件。

假设您将“dijit/registry”放在小部件的依赖项列表中，请尝试：

registry.byId("searchButton").on("click", function execute() {
    // Set the WHERE search text
    this.findParams.searchText = dojo.byId("searchText").value;
    // Sends a request to the ArcGIS REST map service resource to perform a search based
    // on the FindParameters specified in the findParameters argument. On completion, the
    // onComplete event is fired and the optional callback function is invoked.
    this.findTask.execute(this.findParams, this.showResults, this.showError);
});

您出现错误的原因是因为当您这样做时......

<button data-dojo-type="dijit.form.Button" id="searchButton" type="button">Submit</button>

...您创建了一个 id 为“searchButton”的小部件。虽然在呈现小部件模板时节点本身不再具有该 ID。因此不能通过 dom.byId 引用。

如果你想引用小部件的 domNode，你需要这样做：

registry.byId("searchButton").domNode

如果您查看this fiddle，您会发现Button domNode 根本没有id。如果现在您在 Firebug 或浏览器控制台中查看该按钮的 html，您会注意到 domNode 具有属性“widgetid=btn2”而不是“id=btn2”。

【讨论】：