Handlebars 模板中 DO​​M 元素的非唯一 id

Question

我想知道当每个模板都包含非唯一ID时，是否允许在同一个html页面上有多个Handlebars模板？根据具体情况一次只能编译一个模板并加载到 DOM 中。

或者换个说法，<script> 标签内的 html 元素是 DOM 树的一部分，并且还必须具有唯一的 id 值吗？

我的 html/Handlebars 有一个 sn-p（结尾），您可以看到两个模板，每个模板都包含带有 obj-id 和 的元素obj-name id 属性值。

<script id="task-details-template" type="text/x-handlebars-template">
    <div class="form-group">
        <label for="obj-name">Task name</label>
        <input type="text" id="obj-name">
    </div>
    <div class="form-group">
        <label for="obj-id">Task ID</label>
        <input type="text" id="obj-id">
    </div>
</script>

<script id="operator-details-template" type="text/x-handlebars-template">
    <div class="form-group">
        <label for="obj-name">Operator name</label>
        <input type="text" id="obj-name">
    </div>
    <div class="form-group">
        <label for="obj-id">Operator code</label>
        <input type="text" id="obj-id">
    </div>
    <div class="form-group">
        <label for="obj-age">Operator age</label>
        <input type="text" id="obj-age">
    </div>
</script>
</body>
</html>

Answer 1

要形成有效的 HTML5：

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

也就是说，您的网站不会“崩溃”。您可以检查这个小提琴，看看该网站是否仍然有效：fiddle

您可以改为声明一个更符合规范的通用类名，或者在需要时通过将对象绑定到模板来使用 Handlebars 填充 id 字段。例如：

<input type="text" id="{{id-from-an-object-you-bind-to-the-template}}">