当以编程方式实例化小部件时，Dojo重复ID错误，但不是以声明方式

Dojo duplicate ID error when instantiating a widget programmatically, but not declaratively

本文关键字：方式 错误 ID 声明 重复 Dojo 小部 实例化 编程      更新时间：2023-09-26

我使用的是Dojo 1.10。

我试图测试一个自定义小部件，但我得到一个关于重复ID的错误，当我在我的HTML文件中以编程方式添加它。声明式地添加它是可以的。在过去，当我不小心在小部件模板中使用ID属性时，我得到了这个错误，但是我在这个模板中没有ID。下面是一个简化的例子:

演示/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,
     });
   });
演示/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>

它工作正常。知道我哪里做错了吗?

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

尝试为模板中的内容窗格设置唯一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。

相关文章：