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

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 的数据绑定(bind)当然会覆盖它的内容。所以不会显示input。

演示:https://jsfiddle.net/f49c32zx/

问题:我怎样才能完成这项工作？

我没有尝试将具有所有属性和值的整个 input 元素作为模型属性的值 - 这并没有给我一种良好的感觉。

Answer 1

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

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