如何重用HTML用戶界面元素？

我有以下HTML：如何重用HTML用戶界面元素？

<div id="addFieldUI" style="display: none"> 
<div> 
    Field Name: 
    <input type="text" /> 
</div> 
<div> 
    Field Value 
</div> 
<div> 
    Data Type: 
    <select> 
     <option>Price</option> 
    </select> 
</div>

我想重用HTML中至少有兩個其他jQuery的模態。如果我使用$('#otherElem').html($('#addFieldUI').html())將HTML插入到HTML元素中，如果我爲字段使用輸入標識，則存在重複元素的問題。我應該使用輸入名稱嗎？我應該使用'腳本'代碼塊而不是div嗎？我如何創建可重用的HTML？

編輯我知道jQuery數據模板，但在這種情況下，我只是想在MODAL對話框中重用HTML。例如。如果我使用相同的表單來創建和編輯數據。

來源

2011-05-23 fr3dr1k8009

也許這樣的事情，可能是：

var counter = 0; 
$('#otherElem').html(
    $('#addFieldUI') 
     .clone() 
     .attr('id', 'addFieldUI-' + counter++) 
     .html() 
);

來源

2011-05-23 10:43:55

用這種方法我想我可以使用JSON對象的長度作爲計數器。 – fr3dr1k8009 2011-05-23 11:00:23

有一個庫叫做jQuery Templates你可以隨時放棄，我經常在ASP.NET MVC中使用，但是到處都是。

Git中

你有some demos

例如：

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    <li> 
     <b>${Name}</b> (${ReleaseYear}) 
    </li> 
</script> 

<ul id="movieList"></ul> 

<script type="text/javascript"> 

    var movies = [ 
     { Name: "The Red Violin", ReleaseYear: "1998" }, 
     { Name: "Eyes Wide Shut", ReleaseYear: "1999" }, 
     { Name: "The Inheritance", ReleaseYear: "1976" } 
    ]; 

    $("#movieTemplate").tmpl(movies).appendTo("#movieList"); 

</script>

來源

2011-05-23 10:16:22 balexandre

我知道jquery數據模板，我用它們但是我特別想在幾個模式中重用HTML，而沒有任何數據綁定。我會更新這個問題並且更加清楚。 – fr3dr1k8009 2011-05-23 10:22:29

您可以使用一個類名作爲一個鉤子，比附加到其他分區用JS之前動態添加標識

來源

2011-05-23 10:29:26

如何重用HTML用戶界面元素？

回答

相關問題