dojo 尝试使用id注册小部件,但该id已注册

1hdlvixo  于 10个月前  发布在  Dojo
关注(0)|答案(3)|浏览(116)

我有两个按钮,并希望载入不同的自定义模板小部件到一个div取决于哪个按钮被按下。它在第一次单击时工作正常,但当再次单击其中一个按钮时会出现主题错误。我有一个非常简单的例子来尝试让这个概念工作
我的模板代码(有两个非常类似):

define([
  "dojo/_base/declare",
  "dijit/_WidgetBase",
  "dijit/_TemplatedMixin",
  "dojo/text!Templates/Person.htm"
], function (declare, _WidgetBase, _TemplatedMixin, personTpl) {
    return declare([_WidgetBase, _TemplatedMixin], {
        templateString: personTpl
    });
});

字符串
我的模板(有两个非常相似):

<div>
  <p>Bob Jones</p>
</div>


首页:

<body class="claro">

    <script>
        require([
        "dijit/form/Button", 
        "Templates/Person", "Templates/Person2", "dojo/domReady!"
     ], function (Button, Person, Person2) {
         var Button1 = new Button({
             label: "Person1",
             onClick: function () {
                 var p = new Person({}, "page");//error occurs here after a button has been pressed once
             }
         }, "btnPerson1").startup();

         var Button2 = new Button({
             label: "Person2",
             onClick: function () {
                 var p2 = new Person2({}, "page"); //error occurs here after a button has been pressed once
             }
         }, "btnPerson2").startup();
     });
    </script>
    <button id="btnPerson1" type="button"></button>
    <button id="btnPerson2" type="button"></button>
    <div id="page"></div>
  </body>


谢谢你的任何想法

wj8zmpe1

wj8zmpe11#

嘿,我拿了你的代码,我创建了一个jsfiddle测试,现在我意识到你的问题是什么。
如果我理解正确的话,你在创建第二个对象和其他对象时遇到了麻烦。对于第一个小部件,我相信你没事。
所以,第一个对象没问题的原因是因为Dojo使用您的ID创建了小部件,它们有一个名为widgetid的东西。widgetid被放在一个列表中,如果调用小部件的destroy方法,它就会从列表中删除;但是,当您调用小部件的destroy方法时,它将销毁该节点。这是解决你的问题的jsfiddle链接,如果我理解正确,请告诉我。
http://jsfiddle.net/cyeddpe5/26/

define("Person",[
  "dojo/_base/declare",
  "dijit/_WidgetBase",
  "dijit/_TemplatedMixin",  
], function (declare, _WidgetBase, _TemplatedMixin, personTpl) {
    return declare([_WidgetBase, _TemplatedMixin], {
        templateString: "<div><p>Bob Jones</p></div>"
    });
});
     require([
        "dijit/form/Button", 
        "Person", "dojo/domReady!"
     ], function (Button, Person) {
         var Button1 = new Button({
             label: "Person1",
             onClick: function () {
                 //Here is the trick
                 if(window.p)
                 {
                     window.p.destroy(false);
                     var page = document.createElement("div");
                     dojo.body().appendChild(page);
                     page.setAttribute("id","page");
                 }

                 window.p = new Person({}, "page");//error occurs here after a button has been pressed once
             }
         }, "btnPerson1").startup();
     });

字符串
我不喜欢在div中使用id来创建我的小部件,我通常使用对小部件的引用,但这取决于你。记住要销毁小部件并重新创建节点。我很确定有一种方法可以破坏保持节点活动的小部件,但我没有时间找到它。抱歉

vhipe2zx

vhipe2zx2#

这两个按钮都试图使用相同的ID("page")创建一个小部件,并且没有任何东西会破坏这个小部件。Dijit维护了一个以ID为键的小部件注册表,ID自然应该是唯一的,因此任何使用已经注册的小部件的ID创建小部件的尝试都将失败,并会出现该错误。
要首先正确地销毁小部件,可以维护对它的引用(在任何单独的单击回调范围之外的变量中),或者使用dijit/registry.byId再次获取对小部件的引用。然后调用它的destroyRecursive方法。无论哪种方式,都不需要依赖全局变量。
示例:http://jsfiddle.net/zdbvs5c9/
PS:我还应该提到,将new Widget(...).startup()分配给变量是没有意义的,因为startup不会返回任何东西。placeAt可以像这样链接,startup则不行(因为无论如何,立即调用startup并不总是合适的,因为只有在小部件进入文档流之后才需要调用它)。

qjp7pelc

qjp7pelc3#

虽然其他答案解释了错误的根本原因,但一个简单的观察结果是,它可以通过运行Dojo解析器两次来触发。如果既设置了 parseOnLoad,又调用了 parser.parse(),就会发生这种情况。举例来说:

<script type="text/javascript" language="javascript">
    dojoConfig = {
      async: true,
      parseOnLoad: true,
    };

    require(["dojo/parser", "dojo/ready", "dojo/domReady!"],
      function (parser, ready) {
        ready(function () {
          parser.parse();
        });
      }
    );
  </script>

字符串
解决方案是删除 parseOnLoad 元素-让 parser.parse() 完成工作。

相关问题