我有一个复选框绑定到视图模型上的observable。我要求基本上弹出一个“你确定吗?”如果用户将其从true更改为false,则显示确认提示。我有一个可怕的时间找出使变化“可取消”的最佳位置。 。
1)点击事件的jQuery处理程序 2)Viewmodel内部订阅“beforeChange” 3)Viewmodel内部订阅(正常)
在任何情况下,我都非常希望有机会直接取消更改而不是对更改作出反应,如果需要,可能会将其恢复为之前的值。
Knockout的订阅活动是否让您有机会取消更改?任何见解将不胜感激。谢谢!
答案 0 :(得分:22)
这是一个使用jQuery stopImmediatePropagation的简单选项:
http://jsfiddle.net/rniemeyer/cBvXM/
<input type="checkbox" data-bind="click: confirmCheck, checked: myvalue" />
JS:
var viewModel = {
myvalue: ko.observable(false),
confirmCheck: function(data, event) {
if (!confirm("Are you sure?")) {
event.stopImmediatePropagation();
return false;
}
return true;
}
};
答案 1 :(得分:12)
由于@RP Niemeyer回答中提到了问题,我刚刚实现了这个扩展器:
ko.extenders.confirmable = function(target, options) {
var message = options.message;
var unless = options.unless || function() { return false; }
//create a writeable computed observable to intercept writes to our observable
var result = ko.computed({
read: target, //always return the original observables value
write: function(newValue) {
var current = target();
//ask for confirmation unless you don't have
if (unless() || confirm(message)) {
target(newValue);
} else {
target.notifySubscribers(current);
}
}
}).extend({ notify: 'always' });
//return the new computed observable
return result;
};
然后,您可以将其应用于您的模型:
var viewModel = {
myvalue: ko.observable(false).extend({confirmable: "Are you sure?"});
}
并且,如果有一个案例不要求确认(在这个愚蠢的例子中,我们将在3月份跳过确认),你可以这样做:
var viewModel = {
myvalue: ko.observable(false).extend({confirmable: { message: "Are you sure?", unless: function() { return new Date().getMonth() == 2 }} });
}