dojo dijit 额外模板连接事件

Posted 2023-02-16

【中文标题】dojo dijit 额外模板连接事件

【英文标题】：dojo dijit extra template wire up events

【发布时间】：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>

【参考方案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
        
    );

);