Jquery 淘汰赛-取消更改事件?
我有一个复选框绑定到视图模型上的可观察对象。如果用户将其从true更改为false,我需要弹出一个“确定吗?”确认提示。我花了很长时间才找到最好的地方来“取消”更改 1) 单击事件的jQuery处理程序 2) Viewmodel内部订阅“更改前” 3) Viewmodel内部订阅(正常) 在任何情况下,我都非常希望有机会直接取消更改,而不是对更改做出反应,如果需要,可能会将其恢复到以前的值Jquery 淘汰赛-取消更改事件?,jquery,mvvm,knockout.js,Jquery,Mvvm,Knockout.js,我有一个复选框绑定到视图模型上的可观察对象。如果用户将其从true更改为false,我需要弹出一个“确定吗?”确认提示。我花了很长时间才找到最好的地方来“取消”更改 1) 单击事件的jQuery处理程序 2) Viewmodel内部订阅“更改前” 3) Viewmodel内部订阅(正常) 在任何情况下,我都非常希望有机会直接取消更改,而不是对更改做出反应,如果需要,可能会将其恢复到以前的值 Knockout的订阅活动是否给您取消更改的机会?如有任何见解,将不胜感激。谢谢 下面是一个使用jQuer
Knockout的订阅活动是否给您取消更改的机会?如有任何见解,将不胜感激。谢谢 下面是一个使用jQuery的stopImmediatePropagation的简单选项:
由于@RP Niemeyer answer中评论的问题,我刚刚实现了这个扩展程序:
ko.extenders.confirmable=函数(目标,选项){
var message=options.message;
var除非=选项。除非| |函数(){return false;}
//创建一个可写的计算可观察对象,以拦截对我们的可观察对象的写入
var结果=ko.computed({
read:target,//始终返回原始可观察值
写入:函数(newValue){
var current=target();
//要求确认,除非你没有
如果(除非()确认(消息)){
目标(新价值);
}否则{
target.notifySubscribers(当前);
}
}
}).extend({notify:'总是'});
//返回新的计算可观察值
返回结果;
};
然后,您可以将其应用于您的模型,如下所示:
var viewModel = {
myvalue: ko.observable(false).extend({confirmable: "Are you sure?"});
}
而且,如果有不要求确认的情况(在这个愚蠢的例子中,我们将在三月份跳过确认),您可以:
var viewModel = {
myvalue: ko.observable(false).extend({confirmable: { message: "Are you sure?", unless: function() { return new Date().getMonth() == 2 }} });
}
哦,天哪!这非常有帮助。我从来不知道jQuery的stopImmediatePropagation()。虽然我通常尽量避免引用核心viewModel之外的jQuery内容,但这是解决我问题的一个很好的方法。再次感谢你!在我的例子中,
event.stopImmediatePropagation
没有阻止值在ko viewModel中更改。我必须再次设置该值:var cb=event.target。。。data.myvalue(!cb.checked)在这种情况下,数据绑定的顺序非常重要。如果在事件之前绑定值,则首先执行值绑定。如果事件被绑定,它将首先执行并停止传播。看到这把小提琴就知道它坏了:@Jimmy Bosse-这是值得输入答案的,正是我遇到的问题。这将错过任何使用键盘进行更改的人;如果你走这条路线,一定要赶上那些活动。太棒了!它可以在许多场景中使用。只有一件事,它应该像这样使用:.extend({confirmable:{message:“你确定吗?”,除非:function(){return new Date().getMonth()==2}})代码>不错!这是一个精心设计的好主意。
var viewModel = {
myvalue: ko.observable(false).extend({confirmable: "Are you sure?"});
}
var viewModel = {
myvalue: ko.observable(false).extend({confirmable: { message: "Are you sure?", unless: function() { return new Date().getMonth() == 2 }} });
}