敲除值绑定输入类型的奇怪行为

Question

我在 KO 中有两个兄弟输入foreach：

<input type="text" name="background_color"  data-bind="value: $data.background_color">
<input type="hidden" name="background_color"  data-bind="value: $data.background_color">

生成的 DOM 如下所示：

<input type="text" name="background_color" data-bind="value: $data.background_color">
<input type="hidden" name="background_color" data-bind="value: $data.background_color" value="#c9311b">

我是通过 jQuery 的html函数获得的，然后在其他地方使用该 HTML，但是当我在其他地方使用它时，文本输入的值没有设置。

我的解决方法是改用attr绑定，这很有效

data-bind="attr: {'value':$data.background_color}"

但这很痛苦。为什么该值仅设置为input[type="hidden"]？

使用 KO v3.3.0。

Answer 1

文本输入的当前值根本不会反映在元素/属性级别的 DOM 中，因此innerHTMLjQueryhtml()不会看到它。

下面的解决方案，但首先让我们看看 的行为value以及为什么它type="text"与type="hidden".

value属性与value属性

该value属性不是文本输入的值，而是文本输入的默认值。设置文本输入的值不会设置属性。相比之下，隐藏输入在“默认值”和“当前值”之间进行区分是没有意义的，因此设置value属性确实设置了属性，因此您可以在生成的 HTML 中看到该属性.

这种行为value与 KO 无关，它只发生在原始 DOM 操作中：

document.getElementById("the-text-field").value = "text field value";
document.getElementById("the-hidden-field").value = "hidden field value";

<input id="the-text-field" type="text" name="background_color" >
<input id="the-hidden-field" type="hidden" name="background_color">

此处的 HTML5 规范涵盖了这一点，其中讨论了value属性及其具有的不同模式：

该valueIDL属性允许脚本操作的输入元素的值。该属性处于以下模式之一，用于定义其行为：

价值

在获取时，它必须返回元素的当前值。在设置时，它必须将元素的值设置为新值，将元素的脏值标志设置为真，调用值清理算法，如果元素的类型属性的当前状态定义了一个，然后，如果元素有一个文本输入光标位置，应将文本输入光标位置移动到文本字段的末尾，取消选择任何选定的文本并将选择方向重置为无。

默认

在获取时，如果元素具有 value 属性，则必须返回该属性的值；否则，它必须返回空字符串。在设置时，它必须将元素的 value 属性设置为新值。

... （还有其他几种模式）

...在这里，它说input type="hidden"'svalue使用“默认”模式但input type="text"使用“值”模式（您必须向下滚动到“IDL属性和方法”表；value是列出的第三个）。

解决方案

正如您所发现的，解决方案是确保value设置了该属性。正如您所提到的，您可以通过attr绑定来做到这一点，但正如您所说的那样，这有点痛苦。相反，您可以为自己设置自定义绑定值和默认值；由于默认值作为value属性反映在 DOM 中，因此您将在html()以下位置看到它：

// The binding handler
ko.bindingHandlers.valueWithAttr = {
  update: function(element, valueAccessor) {
    element.value = element.defaultValue = ko.unwrap(valueAccessor());
    // Or we could do:
    // var value = ko.unwrap(valueAccessor());
    // element.value = value;
    // element.setAttribute("value", value);
    // ...but since that's what setting `defaultValue` does...
  }
};

// Using it
var vm = {
  background_color: "blue"
};
ko.applyBindings(vm, document.body);

$("<pre>").text(
  "html of the inputs: " +
  $("#container").html()
).appendTo(document.body);

<div id="container">
  <input type="text" name="background_color"  data-bind="valueWithAttr: $data.background_color">
  <input type="hidden" name="background_color"  data-bind="valueWithAttr: $data.background_color">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>