dojo dijit 额外模板连接事件答案

【问题标题】：dojo dijit extra template wire up eventsdojo dijit 额外模板连接事件
【发布时间】：2018-02-13 11:53:19
【问题描述】：

我正在使用 dojo dijit 创建一个模板化的小部件，但是需要加载一个带有 data-dojo-attach-event 的单独 HTML 模板表单并连接事件，因为该表单被设计为递归地使用多级，即被实例化并放置在对话框中。但是，问题是如何使用模板中已经指定的“data-dojo-attach-event”信息在额外模板中将事件连接到主窗口小部件的方法，而无需显式编写代码来连接事件处理程序。

这里是简化的代码：

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_OnDijitClickMixin",
    "dijit/_TemplatedMixin",
    "dojo/text!./templates/SomeWidget.html",
    "dojo/text!./templates/extraTemplate.html"
], function(declare, _WidgetBase, _OnDijitClickMixin, _TemplatedMixin,
        template, extraTemplate) {

    return declare([_WidgetBase, _OnDijitClickMixin, _TemplatedMixin], {
        templateString: template

        // what should I do here???

        postCreate: function () {
           var self = this;

           this.inherited(arguments);

           // or, what should I do here or otherwise???
        }

        clickme: function(evt) {
           // do something
        }
    });

});

额外模板.html：

<div>
   <button data-dojo-type="dijit/form/Button" data-dojo-attach-event="onclick: clickme">button</button>
</div>

【问题讨论】：

标签： javascript events dojo widget

【解决方案1】：

您可以使用您的 extraTemplate 再创建一个小部件，并为其定义一些默认的点击处理程序：

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dojo/text!./extraTemplate.html"
], function (
    declare,
    _WidgetBase,
    _TemplatedMixin,
    _WidgetsInTemplateMixin,
    template
) {
    return declare("Extra", [_WidgetBase, _TemplatedMixin], {
        templateString: template,
        clickHandler: function () {
        }
    });
});

在您的“主”小部件中创建它的实例并将点击处理程序传递给构造函数：

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_OnDijitClickMixin",
    "dijit/_TemplatedMixin",
    "dojo/text!./templates/SomeWidget.html",
    "./ExtraForm"

], function(
  declare, 
  _WidgetBase, 
  _OnDijitClickMixin, 
  _TemplatedMixin,
  template,
  ExtraForm
) {

    return declare([_WidgetBase, _OnDijitClickMixin, _TemplatedMixin], {
        templateString: template

        // what should I do here???

        postCreate: function () {
           var self = this;

           this.inherited(arguments);

           let form = new ExtraForm({
               clickHandler: this.clickme
           })
        }

        clickme: function(evt) {
           // do something
        }
    });

});

【讨论】：