javascript - 尝试使用 id 注册小部件,但该 id 已经注册

标签 javascript dojo

我有两个按钮,想根据按下的按钮将不同的自定义模板小部件加载到 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>

感谢任何想法

最佳答案

嘿,我拿了你的代码并创建了一个 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 来创建我的小部件,我通常使用对小部件的引用来代替它,但这取决于您。请记住销毁小部件并重新创建节点。我很确定有一种方法可以销毁使节点保持事件状态的小部件,但我没有时间找到它。对不起。

关于javascript - 尝试使用 id 注册小部件,但该 id 已经注册,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25797195/

相关文章:

javascript - 当仅给出宽度或高度时,所有浏览器都会按比例缩放图像吗?

javascript - 链式 promise 不会传递拒绝

javascript - 链接道场延迟

css - 更改 dijit 的主题或样式

javascript - IE 中的自关闭弹出窗口——如何获得正确的 onBlur 行为?

javascript - 脚本在 Chrome 中乱序加载

javascript - momentJs add days 返回 moment 对象而不是日期

javascript 函数链中的变量赋值

javascript - 如何在模拟的 Jest 函数中使用 var 作为返回值?

javascript - 如何运行 data-dojo-attach-event?