Question

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

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

Answer 1

您可以使用类名作为钩子，并且在附加到其他div之前使用Js来动态添加ID

Answer 2

这样的事情，也许是：

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

Answer 3

有一个名为 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>

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

3 个答案: