javascript - 在 html 中使用变量的更好方法

Question

我想要一个用于创建动态用户详细信息表单的模板。但是我需要为所有元素设置不同的 ids，以便正确发布详细信息。我的模板看起来像:-

<div id="user-template" class="hidden">
    <div class='lbl-div' id='user(user_number)'>
        <label>User(user_number)</label>
    </div>
    <label class="lbl" id="user(user_number)_firstname">Firstname:</label>
    <input type="text" value="" />
    <label class="lbl" id="user(user_number)_lastname">Lastname:</label>
    <input type="text" value="" />
</div>

这里，user_number 是一个变量。 onclick 按钮将选择此模板-->用全局变量替换 user_number-->增加全局变量-->将修改后的模板作为子模板附加到父 div.

我将变量替换为:-

template = template.replace(/\(user_number\)/g, count);
count++;

这里的count是全局变量。

有没有更好的方法来实现这一点(动态使用 template 并改变 id)？

Answer 1

如果您使用的是 html 模板，请尝试使用任何模板引擎，例如 underscore , mustache .但是模板引擎不会为您提供模板和数据之间的两种绑定(bind)方式。它只是用给定的数据渲染模板。

如果您想使用纯粹的双向数据绑定(bind)应用程序，请尝试使用网络应用程序框架，如 angularjs或 emberjs .