Javascript Dojo:Dijit在克隆其容器后丢失选择
作为一名Dojo新手，我正在尝试创建一个简单的页面向导，使用一个简单的JS数组作为堆栈，在不使用StackContainer的情况下推送和弹出克隆的主内容DOM节点 问题是，当我返回到上一个页面并使用从堆栈中弹出的克隆主内容节点“重新填充”页面时，示例代码中的控件、单选按钮、，但我在DataGrid dijit中选择行时也有类似的问题，我没有显示，但更重要的是，我的应用程序似乎与我以前看到的相同，例如，单选按钮与我以前选择的相同。但是 我似乎无法与他们互动，例如根本无法选择其他单选按钮 事实上，无论页面外观如何，都没有选中这两个控件。 如果我将这些单选按钮从DIJIT更改为普通html输入控件，就不会有这样的问题。Javascript Dojo:Dijit在克隆其容器后丢失选择,javascript,html,dom,dojo,digit,Javascript,Html,Dom,Dojo,Digit,作为一名Dojo新手，我正在尝试创建一个简单的页面向导，使用一个简单的JS数组作为堆栈，在不使用StackContainer的情况下推送和弹出克隆的主内容DOM节点 问题是，当我返回到上一个页面并使用从堆栈中弹出的克隆主内容节点“重新填充”页面时，示例代码中的控件、单选按钮、，但我在DataGrid dijit中选择行时也有类似的问题，我没有显示，但更重要的是，我的应用程序似乎与我以前看到的相同，例如，单选按钮与我以前选择的相同。但是 我似乎无法与他们互动，例如根本无法选择其他单选按钮 事实上，
问题是，您处于一个奇怪的位置，您克隆了小部件DOM，但是在注册表中对小部件的引用在您的应用程序中被删除。如果您执行dijit.registry.toArray，您将看到单选按钮不在那里。因此，您拥有小部件的DOM方面，但没有其后端支持 您可以做的是在解析器解析DOM之前保留它的副本。您必须首先将单选按钮创建为html，然后克隆并运行parse命令。执行销毁操作后，可以重新添加非parsed html，然后再次运行解析器 有人也有同样的问题：
谢谢@提示27。接受你的答案。这个“变通方法”确实有效，但似乎不太合理，而且有点麻烦。但是，使用网页设置向导是很自然的事情。因此，我的后续问题是，在下一页演示完全依赖于上一页的“动态”输入的情况下，使用dojo实现这种向导的最佳自然方式是什么？我必须尝试一下，但从理论上讲，您应该能够dojo.empty div来删除dom组件，然后再将代码放回原处。如果您不调用widget destroy命令，那么widget应该仍然存在。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css"
href="../dojo/dijit/themes/dijit.css">
<link rel="stylesheet" type="text/css"
href="../dojo/dijit/themes/soria/soria.css">
<title>TestSimplerStillS1</title>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='../dojo/dojo/dojo.js'></script>
<script>
// The stack used for the wizard
var mainContentStack=[]
dojo.ready(function(){
// Reset the stack
mainContentStack=[];
// Add the radio btns
var radioData11 = {value: "Radio1.1", label: "Radio1.1_lbl"};
var radioData12 = {value: "Radio1.2", label: "Radio1.2_lbl"};
populateNextPageRadioBtns("radios1", [radioData11, radioData12]);
// disable the back btn for the first page
dojo.byId("backBtn").disabled=true;
});
function onNextClicked() {
// Push the main content onto a stack to store
pushCloneOnStack();
// Find the selected radio btn and display it
displaySelectedRadio();
// Clear the existing radio btns
destroyAll("rdbtns_div_id");
// disable the next btn for the last page
dojo.byId("nextBtn").disabled=true;
}
function displaySelectedRadio() {
var rdDivs = dojo.byId("rdbtns_div_id").children;
for (var i = 0; i < rdDivs.length; i++) {
rdDiv = rdDivs[i];
if (rdDiv !== null) {
var rd = rdDiv.children[0].children[0];
if (rd.checked) {
dojo.byId("rdbtns_sel_div_id").innerHTML=rd.value;
}
}
}
}
function onBackClicked() {
popAndAssignFromStack();
}
function destroyAll(nodeId){
var wContainers = dojo.byId(nodeId);
dojo.forEach(dijit.findWidgets(wContainers), function(w) {
w.destroyRecursive(false);
});
dojo.byId(nodeId).innerHTML = "";
}
function populateNextPageRadioBtns(grpIdentifier, radioBtnDataArray){
// Create new radio btns
require(['dojo/_base/array'], function(array){
var i = 0;
array.forEach(radioBtnDataArray, function(radioBtnData){
// Create the radio btns and default the 1st radio btn to be checked
createRadioBtn(grpIdentifier, radioBtnData, (i==0));
i++;
});
});
}
function createRadioBtn(nextPageSqlStr, radBtnData, isChecked){
var radGrpName = "rd_" + nextPageSqlStr + "_grp_name";
var radVal = radBtnData.value;
var radLbl = radBtnData.label;
// Only create radio btn contrl set if there is a 'val' prop for the radio button
if(radVal){
var radId = "rd_" + radVal + "_id";
// Create new container DIV
var rdDiv = dojo.create("div", {
id : "rd_" + radVal + "_div_id"
});
// Create the radio btn and put it into the new DIV
dojo.require("dijit.form.RadioButton");
var radioB = new dijit.form.RadioButton({
id: radId,
checked: isChecked,
value: radVal,
name: radGrpName
});
dojo.place(radioB.domNode, rdDiv, "last");
// Create the label and put it into the new DIV
if(radLbl){
var radioBlbl = dojo.create("label", {
"for": radId,
innerHTML: radLbl
});
dojo.place(radioBlbl, rdDiv, "last");
}
// Put the new DIV into the static radio btns containing DIV
dojo.place(rdDiv, dojo.byId("rdbtns_div_id"), "last");
}
}
function pushCloneOnStack() {
/// Push cloned node onto the stack
var contentDomPush = dojo.byId("mycontentdiv");
var cloned = dojo.clone(contentDomPush);
dojo.attr(cloned, "id", "mycontentdivCloned");
mainContentStack.push(cloned);
// Every push means there is a page to go back to, so enable back btn
dojo.byId("backBtn").disabled = false;
}
function popAndAssignFromStack() {
if (mainContentStack && mainContentStack.length > 0) {
// Overwrite the main content with the version popped from the stack
var contentDomPop = mainContentStack.pop();
// Clear the div
destroyAll("mycontentdiv");
dojo.attr(contentDomPop, "id", "mycontentdiv");
dojo.place(contentDomPop, dojo.byId("mycontentcontainerdiv"), "only");
// Every pop means there is a page to go forward to, so enable next btn
dojo.byId("nextBtn").disabled = false;
}
if (mainContentStack.length == 0) {
// Nothing more to pop means there is no page to go back to, so disable the back btn
dojo.byId("backBtn").disabled = true;
}
}
</script>
</head>
<body class="soria">
<div id="mycontentcontainerdiv">
<div id="mycontentdiv">
Radios Btns:
<div id="rdbtns_div_id"></div>
<br>
Radio Selected:
<div id="rdbtns_sel_div_id"></div>
</div>
</div>
<br>
<div id="btnsDiv">
<button data-dojo-type="dijit/form/Button" type="button" id="backBtn">
Back
<script type="dojo/on" data-dojo-event="click">
onBackClicked();
</script>
</button>
<button data-dojo-type="dijit/form/Button" type="button" id="nextBtn">
Next
<script type="dojo/on" data-dojo-event="click">
onNextClicked();
</script>
</button>
</div>
</body>
</html>