淘汰赛 - 取消变更赛事?

时间:2012-05-14 15:51:54

标签: jquery mvvm knockout.js

我有一个复选框绑定到视图模型上的observable。我要求基本上弹出一个“你确定吗?”如果用户将其从true更改为false,则显示确认提示。我有一个可怕的时间找出使变化“可取消”的最佳位置。 。

1)点击事件的jQuery处理程序 2)Viewmodel内部订阅“beforeChange” 3)Viewmodel内部订阅(正常)

在任何情况下,我都非常希望有机会直接取消更改而不是对更改作出反应,如果需要,可能会将其恢复为之前的值。

Knockout的订阅活动是否让您有机会取消更改?任何见解将不胜感激。谢谢!

2 个答案:

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