dojo：使用 registry.byID 返回“未定义”

Question

我在使用 dojo/registry 检索按钮小部件时遇到问题。

我有一个小部件，其中的postCreate-function 调用了其他一些函数。在最后一个 registry.byId() 返回“未定义”导致错误。具有提供的 id 的元素确实存在于 html 模板中。

我还在JSFiddle 中创建了一个非常简单的工作版本，即使我在我的代码中尝试这个变体，我也会得到“未定义”。 编辑： 更新小提琴

这里是在 _setupButton 函数中最初使用 registry.byId() 的代码的简短摘要，以及来自 declare 部分之前的 JSFiddle 的解决方案。两个版本都返回“未定义”：

define(["dojo/_base/declare", "dojo/_base/array", "dojo/_base/lang", "dojo/dom-class", "dojo/number", "dojo/parser", "dojo/ready", "dojo/dom-construct", "dijit/registry", "dijit/form/NumberTextBox", "dijit/_Widget", "dijit/_TemplatedMixin", "dijit/Menu", "dijit/MenuItem", "dojo/text!./templates/template.html"],
function(declare, array, lang, domClass, number, parser, ready, domconstruct, registry, NumberTextBox, _Widget, _TemplatedMixin, Menu, MenuItem, templateStringContent) {

parser.parse();
ready(function () {
     console.info(registry.byId("startCalculationButton"));
});

return declare([_Widget, _TemplatedMixin],
{
    templateString: templateStringContent,

    postCreate() {
       this._setupButton();
    },
    _setupButton: function() {
       buttonWidget = registry.byId("startCalculationButton");
       buttonWidget.set("disabled", true);
    },
});

});

html 与提供的 JSFiddle-Snippet 中的相同。其他 id（对于 toher 元素）也不起作用。 那么为什么registry.byId() 可能对我不起作用？我是 AMD 风格的新手，代码已经使用 dijit.byId 的旧语法。

编辑：

我发现该小部件未在注册表对象中注册。这可能是什么原因？如果找不到模板我会得到一个错误404，所以这个原因我们可以排除。

编辑2：

同样document.getElementById() 只会返回null。我认为传递 templateString 就足够了，dojo 会做其他所有事情吗？

Answer 1

根据dojo documentation，小部件除了_TemplatedMixin 还需要_WidgetsInTemplateMixin 并从它继承：

但是，如果我们想在模板中添加一个小部件，如：

<div class="combinedDateTime">
   <div data-dojo-type="dijit/form/DateTextBox"></div>
   <div data-dojo-type="dijit/form/TimeTextBox"></div>
</div>

在直接扩展的小部件类中使用此模板时，您将 需要mixin dijit._WidgetsInTemplateMixin 除了 dijit._TemplatedMixin.

由于 dijit 按钮将是我模板中的一个小部件，因此添加 _WidgetsInTemplateMixin 并从它继承解决了我的问题，而无需进行其他更改。我的代码现在看起来像这样（缩短）：

define(["dojo/_base/declare", "dijit/registry", "dijit/_Widget", "dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin", "dojo/text!./templates/template.html"],
function(declare, registry, _Widget, _TemplatedMixin, _WidgetsInTemplateMixin, templateStringContent) {

return declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin],
{
    templateString: templateStringContent,

    postCreate() {
       this._setupButton();
    },
    _setupButton: function() {
       buttonWidget = registry.byId("startCalculationButton");
       buttonWidget.set("disabled", true);
    },
});

Answer 2

我注意到您的代码中可能需要特别关注一些问题：

require([
    "dojo/ready",
    "dijit/registry"
], function(
    ready,
    dijitRegistry
) {
    ready( function() {
        var grid = dijitRegistry.byId("startCalculationButton");
        console.info(grid)
        grid.set("disbaled", true);
    });
});

我认为应该是： require(["dojo/ready", "dijit/registry"], function(ready, registry) { ... } 然后你可以使用 registry.byId("somename")

如果您在 require 语法上使用 dgrid/extensions/DijitRegistry， 那么你应该在你的 require 语法之后包含 DijitRegistry （请注意，它区分大小写），但根据我的经验，我只将它用于 dgrid mixin...

希望这可以帮助...