如何在 Dojo Toolkit 中为带有按钮的工具栏定义 Widget 类？

Posted 2023-02-16

【中文标题】如何在 Dojo Toolkit 中为带有按钮的工具栏定义 Widget 类？

【英文标题】：How to define Widget class for toolbar with buttons in Dojo Toolkit?

【发布时间】：2018-04-27 13:07:58

【问题描述】：

我将创建新类 - 带有标准操作按钮的工具栏（添加、编辑、删除、刷新）。我为此编写了简单的类：

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    "dijit/Toolbar",
    // Template for new widget
    "dojo/text!/ui/widgets/StandardToolbar.html",
    // Load dijit/form/Button widget as dependency for parsing template
    "dijit/form/Button"
], function(declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, Toolbar, templateString)
    return declare("app.StandardToolbar", [
        _WidgetBase,
        _TemplatedMixin,
        _WidgetsInTemplateMixin,
        Toolbar
    ], 
        templateString: templateString
    );
);

从基本工具栏扩展的模板：

<div class="dijit" role="toolbar" tabIndex="$tabIndex" data-dojo-attach-point="containerNode">
  <button data-dojo-type="dijit/form/Button" data-dojo-attach-point="addButton">Add</button>
  <button data-dojo-type="dijit/form/Button" data-dojo-attach-point="editButton">Edit</button>
  <button data-dojo-type="dijit/form/Button" data-dojo-attach-point="removeButton">Remove</button>
  <button data-dojo-type="dijit/form/Button" data-dojo-attach-point="refreshButton">Refresh</button>
</div>

而且它不工作。工具栏中的按钮呈现为标准 HTML 按钮，而不是 Dojo 小部件。我做错了什么？

【问题讨论】：

你不会创建自己的 dijit/工具栏？

你能告诉我们你是如何实例化你的小部件的吗！？控制台也有错误

【参考方案1】：

我认为您只是错过了在模板 containerNode div 中设置 dojo 类型 data-dojo-type='dijit/Toolbar'。

你必须设置：

<div data-dojo-type='dijit/Toolbar' class="dijit" role="toolbar" tabIndex="$tabIndex" data-dojo-attach-point="containerNode">

require(["dijit/Toolbar", "dijit/form/Button","dojo/parser", "dojo/domReady!"], function(Toolbar, Button, Parser) 
  Parser.parse();
);

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>
<div class="claro">
  <div class="dijit" data-dojo-type='dijit/Toolbar' role="toolbar" tabIndex="$tabIndex" data-dojo-attach-point="containerNode">
  <button data-dojo-type="dijit/form/Button" data-dojo-attach-point="addButton">Add</button>
  <button data-dojo-type="dijit/form/Button" data-dojo-attach-point="editButton">Edit</button>
  <button data-dojo-type="dijit/form/Button" data-dojo-attach-point="removeButton">Remove</button>
  <button data-dojo-type="dijit/form/Button" data-dojo-attach-point="refreshButton">Refresh</button>
</div>
</div>