Question

我正在使用dojo dijit创建一个模板化的小部件，但是需要加载一个带有data-dojo-attach-event的单独的HTML模板表单并将事件连接起来，因为该表单旨在递归地多层次使用，即被实例化并放置在对话框中。然而，问题是如何使用＆＃34; data-dojo-attach-event＆＃34;在额外模板中将事件连接到主Widget的方法。已经在模板中指定的信息，而没有明确地编写代码来连接事件处理程序。

以下是简化代码：

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

});

extraTemplate.html：

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

Answer 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 () {
        }
    });
});

在你的＆＃34; main＆＃34; widget创建它的实例并将click handler传递给构造函数：

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

});

dojo dijit额外的模板接线事件

1 个答案: