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

【问题标题】：Knockout: nest input element in label tag with data-bind properties淘汰赛：将输入元素嵌套在具有数据绑定属性的标签标签中
【发布时间】：2016-01-15 14:40:35
【问题描述】：

我想使用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 元素作为我模型的属性值 - 这给我的感觉并不好。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：