以编程方式（但不是以声明方式）实例化小部件时出现 Dojo 重复 ID 错误答案

【问题标题】：Dojo duplicate ID error when instantiating a widget programmatically, but not declaratively以编程方式（但不是以声明方式）实例化小部件时出现 Dojo 重复 ID 错误
【发布时间】：2015-07-14 20:43:53
【问题描述】：

我正在使用 Dojo 1.10。

我正在尝试测试一个自定义小部件，但是当我以编程方式将它添加到我的 HTML 文件中时，我收到一个关于重复 ID 的错误。以声明方式添加它可以正常工作。过去，当我不小心在小部件模板中使用了 ID 属性时，我遇到了该错误，但我在此模板中没有 ID。这是一个精简的示例：

demo/TestWidget.js

define([
  "dojo/_base/declare",
  "dijit/_WidgetBase",
  "dijit/_TemplatedMixin",
  "dijit/_WidgetsInTemplateMixin",
  "dojo/text!./template/TestWidget.html",
  "dijit/layout/ContentPane",
], function(declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, template) {
     return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
       baseClass: 'TestWidget',
       templateString: template,
     });
   });

demo/TestWidget.html

<div data-dojo-attach-point="containerNode">
  <div data-dojo-type="dijit/layout/ContentPane">
    Random Stuff
  </div>
</div>

index.html:

<head>
  <script>
    var baseloc = location.pathname.replace(/\/[^/]+$/, "");
    var dojoConfig = {
      parseOnLoad: true, async: true,
      packages: [ { name: "demo", location: baseloc + "/demo" } ]
    };
  </script>

  <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
  <script>
    require([ "demo/TestWidget.js", "dojo/domReady!" ], function(TestWidget) {
        var widget = new TestWidget({ }, 'testnode');
    });
  </script>
</head>

<body class="claro">
  <div id="testnode"></div>
</body>

对于上述代码，我收到错误消息“尝试使用 id==dijit_layout_ContentPane_0 注册小部件，但该 id 已注册”。但是，如果我删除脚本中的 TestWidget 实例化并将“testnode”替换为：

<div data-dojo-type="demo/TestWidget"></div>

它工作正常。任何想法我做错了什么？

【问题讨论】：

我不认为domReady! 确保parseOnLoad 已经完成。尝试使用老式的ready。或显式调用parse 并在完成后创建您的小部件。
感谢您的建议，罗伊。我之前曾尝试过，结果相同，但这次我也设置了dojoConfig.parseOnLoad = false。如果您想将此添加为答案，我会接受。

标签： javascript dojo

【解决方案1】：

我认为问题在于在创建新元素的同时进行解析，因为parseOnLoad 为真。如果您可以将其设置为 false 并在需要时显式调用parse，您应该能够避免它。

【讨论】：

【解决方案2】：

尝试为模板中的内容窗格设置唯一 ID：

<div data-dojo-attach-point="containerNode">
  <div data-dojo-type="dijit/layout/ContentPane" data-dojo-id=myContentPane_{id}>
    Random Stuff
  </div>
</div>

在构造函数中将 id 传递给 Widget，以便在模板中替换它。确保每个实例的 id 都是唯一的。

我的理解是，在声明性方法中，如果在声明性语法中没有明确提及 id，则会自动创建唯一 id。

【讨论】：