dojo - 如何扩展 dijit.form.button

Question

我正在尝试用一个额外的属性扩展 dijit.form.Button 但这不起作用。代码在下面给出

在 file1.js 中

dojo.require('dijit.form.Button');
dojo.extend(dijit.form.Button,{xyz: ''});

在 file2.jsp 中

<script type="text/javascript" src="file1.js"></script>
<div dojoType="dijit.form.Button" xyz="abc"></div>

但是，当我查看创建的按钮的 HTML 时(在 chrome 中右键单击然后选择“检查元素”选项)，它不显示 xyz 属性。

Answer 1

您需要记住，小部件对象与其 HTML 表示形式之间存在区别。当您扩展 dijit.form.Button 时，xyz 属性会添加到小部件类，但不会自动添加到小部件将呈现的 HTML。所以在你的情况下，如果你这样做

console.debug(dijit.byId("yourWidgetId").get("xyz"));

.. 你会看到按钮对象确实有 xyz 成员，但 HTML(正如你指出的那样)没有。

如果您还希望它在 HTML 中可见，则必须手动将其添加到按钮的 HTML 呈现中。一种方法是子类化 dijit.form.Button 并覆盖 buildRendering 方法。

dojo.declare("my.Button", dijit.form.Button, {
    xyz: '',
    buildRendering: function() {
        this.inherited(arguments);
        this.domNode.setAttribute("xyz", this.xyz); 
    }
});

如果您在 HTML 中添加新 Button 类的实例，如下所示:

<div dojoType="my.Button" xyz="foobar" id="mybtn"></div>

.. 然后 HTML 表示(在 Dojo 解析它并将其变成一个漂亮的小部件之后)将包含 xyz 属性。大概是这样的:

<span class="..." xyz="foobar" dir="ltr" widgetid="mybtn">
    <span class="..." dojoattachevent="ondijitclick:_onButtonClick">
    <input class="dijitOffScreen" type="button" dojoattachpoint="valueNode" ...>
</span>