淘汰赛：在具有数据绑定属性的标签标签中嵌套输入元素

Question

我想使用 label 标签而不将 for 属性映射到 input 的 id，如 w3c 所述。喜欢：

<label>
    <input type="...">
</label>

现在我试着让它与 knockout 一起工作。

我的模特：

function myViewModel(data) {
    this.Name = "Max";
    this.Value = "1337";
}

我的第一个方法是：

<label data-bind="text: Name">
    <input data-bind="value: Value" />
</label>

但是 label 的数据绑定当然会覆盖其内容。所以 input 不会出现。

问题：我怎样才能得到这份工作？

我没有尝试将具有所有属性和值的整个 input 元素作为我模型的属性的值 - 这让我感觉不太好。

Answer 1

<label> <!-- ko text: Name --><!-- /ko -->
    <input data-bind="value: Value" />
</label>

Answer 2

您可以在 label 标签内放置一个 span 或虚拟标签，并将文本绑定放在该内部标签上。

<label>
    <!-- ko text: Name --><!-- /ko -->
    <input data-bind="value: Value" />
</label>

Knockout: nest input element in label tag with data-bind properties