javascript - 我怎样才能使 knockout "value"绑定(bind)只写，这样它就不会尝试从中读取？

Question

<input data-bind="value: fileName" type="file" multiple="">
<input data-bind="value: fileName" type="text" readonly="">

这有效，除了我得到:

未捕获的 InvalidStateError:无法在“HTMLInputElement”上设置“value”属性:此输入元素接受一个文件名，该文件名只能以编程方式设置为空字符串。

因为当我只想读取它并将其写入文本输入时，它会尝试设置文件输入的值。

例子

http://jsfiddle.net/esk5akwj/2/

• 复选框。
• 选择一个文件。
• 再次选中复选框。
• 再次尝试选择文件。

Answer 1

由于文件选择器值只能使用文件选择器设置，并且必须以空字符串开头，因此您需要一个自定义绑定(bind)处理程序来包装 value 绑定(bind)并在初始化时设置绑定(bind)值为空字符串:

ko.bindingHandlers.resetValue = {
  init: function(element, valueAccessor, allBindingsAccessor, data, context) {
    valueAccessor()('');
    ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor, data, context);
  },
  update: function(element, valueAccessor, allBindingsAccessor, data, context) {
    ko.bindingHandlers.value.update(element, valueAccessor, allBindingsAccessor, data, context);
  }
};

ko.applyBindings({
  fileName: ko.observable(),
  c: ko.observable()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input data-bind="checked: c" type="checkbox">Check me, choose a file, uncheck me, check me, choose a file.

<!-- ko if: c -->
<input data-bind="resetValue: fileName" type="file" multiple="">
<input data-bind="value: fileName" type="text" readonly>
<!-- /ko -->