動態創建（或複製）包含Dojo內容的div

我必須使用Struts2 & Dojo開發一個項目。我想通過點擊一個按鈕來創建一個包含Dojo小部件的div。
例如：動態創建（或複製）包含Dojo內容的div

<s:form data-dojo-type="dijit.form.Form" 
     data-dojo-props="method: 'post', 
     action: 'myAction'" 
     theme="simple"> 
    <s:div id="myId"> 
     <s:textfield 
      name="aName" 
      data-dojo-type="dijit.form.TimeTextBox" 
      data-dojo-props="name: 'aName'" /> 
     // More Dojo widgets ... 
    </s:div> 
</s:form>

我想的JavaScript函數「重複」的「myDiv」事業部，並將其置於TE前一個，依此類推......

最終的結果可能是類似的東西：

<s:form data-dojo-type="dijit.form.Form" 
     data-dojo-props="method: 'post', 
     action: 'myAction'" 
     theme="simple"> 
    <s:div id="myId"> 
     <s:textfield 
      name="aName" 
      data-dojo-type="dijit.form.TimeTextBox" 
      data-dojo-props="name: 'aName'" /> 
     // More Dojo widgets ... 
    </s:div> 
    <s:div id="myId_2"> 
     <s:textfield 
      name="aName" 
      data-dojo-type="dijit.form.TimeTextBox" 
      data-dojo-props="name: 'aName'" /> 
     // More Dojo widgets ... 
    </s:div> 
    <s:div id="myId_3"> 
     <s:textfield 
      name="aName" 
      data-dojo-type="dijit.form.TimeTextBox" 
      data-dojo-props="name: 'aName'" /> 
     // More Dojo widgets ... 
    </s:div> 
</s:form>

謝謝您的幫助

來源

2011-11-21 Vince

克隆DOM與dijit的內部節點可以是有點棘手。 dojo.clone函數將克隆dijits的DOM節點，但它不會執行對dojo.connect的調用，將其註冊到dijit註冊表等等。你會看到盒子看起來像dijits，但不起作用。考慮它有點像複印一本小冊子，但不能將頁面裝訂在一起。

最好的辦法是在Dojo的解析器解析之前製作myDiv的克隆。這意味着您不能在Dojo配置中將parseOnLoad設置爲true。

例如，使克隆和dojo.ready一些地方保存它，並在年底手動運行解析器：

var clonableDiv, 
    numClones = 0; 

dojo.ready(function() 
{ 
    clonableDiv = dojo.clone(dojo.byId("myId")); 
    dojo.parser.parse(); 
});

現在，讓我們說你有ID爲「myButton的」一個按鈕，用於添加克隆的形式：

dojo.connect("myButton", "onclick", function() 
{ 
    var newClone = dojo.clone(clonableDiv); 
    newClone.setAttribute("id", "myId_" + numClones); 
    newClone.childNodes[1].setAttribute("data-dojo-props", "name: 'aName_" + numClones + "'"); 
    dojo.place(newClone, dojo.byId("myId"), "after"); 
    numClones++; 
    dojo.parser.parse(newClone); 
});

這裏有幾件事要注意。首先，您必須確保不要在文檔中插入重複的ID。輸入字段的名稱屬性也是如此。另外，插入克隆後，您需要明確解析新插入的div。

它確實有點亂，特別是如果您有多個節點或帶有ID或名稱的小部件，您必須確保它們是唯一的。在某些時候，甚至可以用編程方式構建一切而不是克隆myId。或者，您可以爲可重複區域創建自定義小部件。

來源

2011-11-22 10:55:01 Frode

動態創建（或複製）包含Dojo內容的div

回答

相關問題