如何重用 HTML 用户界面元素

How do I reuse HTML User Interface elements?

本文关键字：元素 用户界面 HTML 何重用      更新时间：2023-09-26

我有以下 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>

我想在至少另外两个jQuery模态中重用HTML。如果我使用$('#otherElem').html($('#addFieldUI').html())将 HTML 插入 HTML 元素，如果我对字段使用输入 ID，我会遇到重复元素的问题。我应该使用输入名称吗？我应该使用"脚本"代码块而不是div 吗？如何创建可重用的 HTML？

编辑我知道jQuery数据模板，但在这种情况下，我只想在MODAL dialog中重用HTML。例如，如果我使用相同的表单来创建和编辑数据。

也许是这样的：

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

你可以使用类名作为钩子，并且在附加到另一个div 之前使用 Js 动态添加 ID

有一个名为jQuery Templates的库，您可以随时尝试一下，我经常在MVC中使用 ASP.NET 但可以在任何地方使用。

在 Git 中，您有一些演示

例：

<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>
相关文章：