javascript - knockout.js 如何在 ko.computed 写入中取消 confirm() 后设置所选选项

Question

我有一个带有选项和默认文本的选择器元素:

self._selected = ko.observable();
self.option = ko.computed({
    read:function(){
        return self._selected;
    },
    write: function(data){
        if(data){
            if(confirm('are you sure?')){
                self._selected(data);
            }else{
                //reset
            }
        }
    }
});

---

<select data-bind="options: options, value:option, optionsCaption: 'choose ...'"></select>

这个问题:

• 选择“一个”
• 确认点击取消
• 所选选项是“一个”仍处于焦点状态

应该是“选择...”

jsbin here , 它只在 chrome 上测试过

Answer 1

问题是底层变量的值没有改变，所以没有事件告诉 Knockout 它的 value 与 viewmodel 不同步。

对于普通的可观察对象，您可以调用 valueHasMutated 来指示发生了一些神秘的变化，但计算似乎没有。但他们确实有 notifySubscribers。事实上，你的例子很像 this example in the docs .

这是一个工作示例:

function vm() {
  const self = {};

  self.options = ko.observableArray(['one', 'two', 'three']);
  self._selected = ko.observable();
  self.option = ko.pureComputed({
    read: self._selected,
    write: function(data) {
      if (data) {
        if (confirm('are you sure?')) {
          self._selected(data);
        } else {
          self.option.notifySubscribers(self._selected());
        }
      }
    }
  });

  return self;
}

ko.applyBindings(vm());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select data-bind="options: options, value:option, optionsCaption: 'choose ...'"></select>
<div data-bind="text:_selected"></div>
<div data-bind="text:option"></div>