我有两个按钮,并希望载入不同的自定义模板小部件到一个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>
型
谢谢你的任何想法
3条答案
按热度按时间wj8zmpe11#
嘿,我拿了你的代码,我创建了一个jsfiddle测试,现在我意识到你的问题是什么。
如果我理解正确的话,你在创建第二个对象和其他对象时遇到了麻烦。对于第一个小部件,我相信你没事。
所以,第一个对象没问题的原因是因为Dojo使用您的ID创建了小部件,它们有一个名为widgetid的东西。widgetid被放在一个列表中,如果调用小部件的destroy方法,它就会从列表中删除;但是,当您调用小部件的destroy方法时,它将销毁该节点。这是解决你的问题的jsfiddle链接,如果我理解正确,请告诉我。
http://jsfiddle.net/cyeddpe5/26/
字符串
我不喜欢在div中使用id来创建我的小部件,我通常使用对小部件的引用,但这取决于你。记住要销毁小部件并重新创建节点。我很确定有一种方法可以破坏保持节点活动的小部件,但我没有时间找到它。抱歉
vhipe2zx2#
这两个按钮都试图使用相同的ID(
"page"
)创建一个小部件,并且没有任何东西会破坏这个小部件。Dijit维护了一个以ID为键的小部件注册表,ID自然应该是唯一的,因此任何使用已经注册的小部件的ID创建小部件的尝试都将失败,并会出现该错误。要首先正确地销毁小部件,可以维护对它的引用(在任何单独的单击回调范围之外的变量中),或者使用
dijit/registry.byId
再次获取对小部件的引用。然后调用它的destroyRecursive
方法。无论哪种方式,都不需要依赖全局变量。示例:http://jsfiddle.net/zdbvs5c9/
PS:我还应该提到,将
new Widget(...).startup()
分配给变量是没有意义的,因为startup
不会返回任何东西。placeAt
可以像这样链接,startup
则不行(因为无论如何,立即调用startup
并不总是合适的,因为只有在小部件进入文档流之后才需要调用它)。qjp7pelc3#
虽然其他答案解释了错误的根本原因,但一个简单的观察结果是,它可以通过运行Dojo解析器两次来触发。如果既设置了 parseOnLoad,又调用了 parser.parse(),就会发生这种情况。举例来说:
字符串
解决方案是删除 parseOnLoad 元素-让 parser.parse() 完成工作。