Question

作为一名Dojo新手，我正在尝试创建一个简单的页面向导，使用普通的JS数组作为堆栈，我将克隆的主要内容DOM节点推入并弹出（不使用StackContainer）

问题在于，当我回到上一页并“重新填充”页面时，克隆的主内容节点从堆栈中弹出，控件（在此示例代码中，单选按钮，但我有类似的问题选择我没有显示但对我的应用程序更重要的DataGrid dijit中的行似乎与我之前看到的相同（例如，单选按钮与我之前选择的相同）。但是

我似乎无法与他们互动，例如无法选择其他单选按钮
事实上，无论是页面外观，都没有选择任何控件。
如果我将这些单选按钮从dijits更改为普通html输入控件，则没有这样的问题。

<!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>

Answer 1

问题是你在一个奇怪的地方，你克隆了小部件DOM，但在你的破坏中删除了对注册表中小部件的引用（如果你做了dijit.registry.toArray（），你会看到单选按钮不存在）。所以你有小部件的DOM方面，但没有后端支持。

您可以做的是在解析器解析之前保留DOM的副本。你必须首先创建radiobuttons作为html，克隆然后运行parse命令。执行销毁后，您可以重新添加未解析的html，然后再次运行解析器。

以下是有同样问题的人： http://www.developer-corner.com/2011/06/cloning-dijit-widgets.html

Dojo：Dijit克隆了他们的<div>容器</div>后失去了选择权

1 个答案: