如何重用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用户界面元素？

回答

相关问题