Dojo: Dijit теряет выделение после клонирования своих контейнеров

Как новичок в Dojo, я пытаюсь создать простой мастер страниц с использованием простого массива JS в виде стека, который я нажимаю и выворачиваю и удаляю клонированный основной узел DOM контента. (без использования StackContainer)Dojo: Dijit теряет выделение после клонирования своих контейнеров

Проблема заключается в том, что, когда я возвращаюсь к предыдущей странице и «повторно заполняю» страницу с клонированным узлом основного контента, выпадающим из стека, элементы управления (в этом примере кода, переключатели , но у меня есть аналогичная проблема с выбором строк в DataGrid dijit, которые я не показываю, но имеет большее значение для моего приложения), по-видимому, такая же, как я ранее видел (например, радиокнопка такая же, как я ранее выбрал). Но

Я не могу взаимодействовать с ними, например. не удалось выбрать другую радиокнопку
Ни один из элементов управления, по сути, не выбран, несмотря на внешний вид страницы.
Если я изменил эти переключатели от диджитов до простых элементов управления 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>

источник

2014-02-10 paranoma53

Проблема в том, что вы находитесь в странном месте, вы клонировали виджеты DOM, но ссылка на виджет в реестре удаляется в вашем уничтожить (если вы делаете dijit.registry.toArray() вы увидите, что переключателей там нет). Таким образом, у вас есть DOM-аспект виджета, но ни одна из его поддержки на бэкэнд.

Что вы можете сделать, так это сохранить копию DOM до того, как синтаксический анализатор проанализировал ее. Вам сначала нужно создать радиообъекты как html, затем клонировать команду parse. После того, как вы выполните уничтожение, вы можете повторно добавить непаранный html обратно, а затем снова запустить парсер.

Вот кто-то, что была такая же проблема: http://www.developer-corner.com/2011/06/cloning-dijit-widgets.html

источник

2014-02-11 04:05:23 tik27

Спасибо! @ Tik27. Принял ваш ответ. – paranoma53

Это «обходное решение» действительно работает, но, похоже, неудобно и немного громоздко. Но волшебник - это естественная вещь, чтобы настроить веб-страницы. поэтому мой следующий вопрос заключается в том, что лучший и естественный способ реализовать такого мастера, где следующая презентация страницы полностью зависит от ввода предыдущей страницы «на лету», используя додзе? – paranoma53

Я бы попробовал, но теоретически вы должны уметь dojo.uty div просто удалить компоненты dom, а затем вернуть код обратно. Если вы не вызываете команды уничтожения виджета, виджеты все равно должны быть на месте. – tik27

Dojo: Dijit теряет выделение после клонирования своих контейнеров

ответ

Смежные вопросы