Javascript knockout.js如何在ko.computed write中取消confirm()后设置所选选项

Javascript knockout.js如何在ko.computed write中取消confirm()后设置所选选项,javascript,knockout.js,knockout-3.0,computed-observable,Javascript,Knockout.js,Knockout 3.0,Computed Observable,我有一个带有选项和默认文本的选择器元素: self._selected = ko.observable(); self.option = ko.computed({ read:function(){ return self._selected; }, write: function(data){ if(data){ if(confirm('are you sure?')){ self.

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

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
            }
        }
    }
});


问题在于:

  • 选择“一”
  • 在确认菜单上,单击取消
  • 所选选项是仍处于焦点下的“一”
应该是“选择…”


,它只在chrome上进行了测试

问题是基础变量的值没有变化,因此没有事件告诉Knockout它的
与viewmodel不同步

对于正常的可观测值,您可以调用
valuehassmutated
来指示发生了某种神秘的变化,但Computed似乎没有这种变化。但是他们确实有
订户
。事实上,你的例子很像

下面是一个工作示例:

函数vm(){
常量self={};
self.options=ko.observearray(['1','2','3']);
self._selected=ko.observable();
self.option=ko.pureComputed({
阅读:self.\u已选择,
写入:函数(数据){
如果(数据){
如果(确认('你确定吗?')){
自选(数据);
}否则{
self.option.notifySubscribers(self.\u selected());
}
}
}
});
回归自我;
}
应用绑定(vm())

这里有一种不对称性:

当您更改一个选择框的值时,DOM会立即更新,然后被淘汰(当然,淘汰取决于DOM更改事件)。因此,当代码询问“确定吗?”时,DOM已经有了新值

现在,当您将该值写入绑定到
值:
的可观察对象时,viewmodel的状态不会改变。而knockout仅在可观察到的更改时更新DOM。因此DOM保持在选定值,而viewmodel中的绑定值不同


最简单的方法是将旧值保存在变量中,始终将新值写入可观察值,如果用户单击“否”,则只需恢复旧值。这样,不对称性被打破,DOM和viewmodel保持同步

var-AppData=函数(参数){
var self={};
选择的var=ko.可观察();
self.options=ko.observearray(参数选项);
self.option=ko.computed({
读:选中,
写入:函数(值){
var oldValue=selected();
选定(值);
if(value!==oldValue&!confirm('确定吗?')){
选定(旧值);
}
}
});
回归自我;
};
// ----------------------------------------------------------------------
ko.applyBindings(新的AppData({
选项:[‘一’、‘二’、‘三’]
}));



奇怪,使用
.notifySubscribers()
时我什么也没做。你是在
选项上调用它还是在
上调用它?啊,我不应该在
上调用它。当然,这个值没有订阅者。另外,请通读关于knockout Extender的文档。
<select data-bind="options: options, value:option, optionsCaption: 'choose ...'"></select>