如何在Dojo Toolkit中定义含标准按钮的工具栏Widget类？

你想要打造一个包含标准操作按钮的可复用工具栏Widget，基于Dojo的组件体系，我帮你完善了完整的实现代码，包含Widget类定义、对应的模板文件，以及使用说明：

1. Widget Class Implementation #

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    "dijit/Toolbar",
    "dijit/form/Button",
    // 加载Widget模板
    "dojo/text!/ui/widgets/StandardToolbar.html"
], function(
    declare,
    _WidgetBase,
    _TemplatedMixin,
    _WidgetsInTemplateMixin,
    Toolbar,
    Button,
    template
) {
    return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
        // 绑定模板内容
        templateString: template,
        
        // 初始化后设置按钮事件绑定
        postCreate: function() {
            this.inherited(arguments);
            
            // 给每个按钮绑定点击事件，暴露给外部调用
            this.addButton.on("click", this._onAddClicked.bind(this));
            this.editButton.on("click", this._onEditClicked.bind(this));
            this.removeButton.on("click", this._onRemoveClicked.bind(this));
            this.refreshButton.on("click", this._onRefreshClicked.bind(this));
        },
        
        // 内部事件处理方法，可被子类重写，或通过on()方法监听
        _onAddClicked: function() {
            this.emit("addClicked");
        },
        
        _onEditClicked: function() {
            this.emit("editClicked");
        },
        
        _onRemoveClicked: function() {
            this.emit("removeClicked");
        },
        
        _onRefreshClicked: function() {
            this.emit("refreshClicked");
        },
        
        // 可选：提供禁用/启用按钮的公共方法
        setButtonDisabled: function(buttonName, isDisabled) {
            switch(buttonName.toLowerCase()) {
                case "add":
                    this.addButton.set("disabled", isDisabled);
                    break;
                case "edit":
                    this.editButton.set("disabled", isDisabled);
                    break;
                case "remove":
                    this.removeButton.set("disabled", isDisabled);
                    break;
                case "refresh":
                    this.refreshButton.set("disabled", isDisabled);
                    break;
            }
        }
    });
});

2. Template File (/ui/widgets/StandardToolbar.html) #

<div class="standard-toolbar">
    <div data-dojo-type="dijit/Toolbar">
        <button data-dojo-type="dijit/form/Button" 
                data-dojo-attach-point="addButton"
                data-dojo-props="iconClass:'dijitIconAdd'">
            Add
        </button>
        <button data-dojo-type="dijit/form/Button" 
                data-dojo-attach-point="editButton"
                data-dojo-props="iconClass:'dijitIconEdit'">
            Edit
        </button>
        <button data-dojo-type="dijit/form/Button" 
                data-dojo-attach-point="removeButton"
                data-dojo-props="iconClass:'dijitIconDelete'">
            Remove
        </button>
        <span data-dojo-type="dijit/ToolbarSeparator"></span>
        <button data-dojo-type="dijit/form/Button" 
                data-dojo-attach-point="refreshButton"
                data-dojo-props="iconClass:'dijitIconRefresh'">
            Refresh
        </button>
    </div>
</div>

3. Usage Example #

在你的应用中引用并实例化这个工具栏Widget：

require([
    "your/path/to/StandardToolbar",
    "dojo/domReady!"
], function(StandardToolbar) {
    // 创建工具栏实例并挂载到DOM节点
    var toolbar = new StandardToolbar({}, "toolbar-container");
    toolbar.startup();
    
    // 监听按钮点击事件
    toolbar.on("addClicked", function() {
        console.log("Add button clicked!");
        // 执行你的添加逻辑
    });
    
    toolbar.on("editClicked", function() {
        console.log("Edit button clicked!");
        // 执行你的编辑逻辑
    });
    
    // 禁用Edit按钮示例
    toolbar.setButtonDisabled("edit", true);
});

Key Notes #

• Mixin组合：使用_TemplatedMixin加载HTML模板，_WidgetsInTemplateMixin解析模板中的Dojo组件（比如dijit/form/Button）
• Attach Points：通过data-dojo-attach-point在Widget类中引用模板内的按钮组件，方便后续操作
• 事件暴露：通过emit()方法将按钮点击事件暴露给外部，符合Dojo的事件机制
• 可扩展性：你可以轻松修改模板添加新按钮，或者在Widget类中添加更多公共方法来控制工具栏行为

内容的提问来源于stack exchange，提问作者Dunaevsky Maxim