淘汰赛 - 取消变更事件？答案

【问题标题】：Knockout - Cancel a Change Event?淘汰赛 - 取消变更事件？
【发布时间】：2012-05-22 03:20:43
【问题描述】：

我有一个复选框绑定到视图模型上的可观察对象。我需要基本上弹出一个“你确定吗？”如果用户将其从 true 更改为 false，则确认提示。我很难找到使更改“可取消”的最佳位置。 . .

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

在任何情况下，我都更愿意有机会彻底取消更改，而不是对更改做出反应，如果需要，可能会将其恢复为之前的值。

Knockout 的订阅事件是否让您有机会取消更改？任何见解将不胜感激。谢谢！

【问题讨论】：

标签： jquery mvvm knockout.js

【解决方案1】：

这是一个使用 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;
    }
};

【讨论】：

天哪！这非常有帮助。我从来不知道 jQuery 的 stopImmediatePropagation()。虽然我通常会尽量避免在核心 viewModel 之外引用 jQuery 的东西，但这对我的问题来说是一个很好的解决方案。再次感谢您！
在我的情况下，event.stopImmediatePropagation 并没有阻止 ko viewModel 中的值发生变化。我不得不再次设置值：var cb = event.target; ... data.myvalue(!cb.checked);
在这种情况下，数据绑定的顺序非常很重要。如果在事件之前绑定值，则值绑定首先执行。如果事件被绑定，它将首先执行并停止传播。看看这个小提琴看看它坏了：jsfiddle.net/8AuVj
@Jimmy Bosse - 这是值得提出的答案，正是我遇到的问题。
这将错过任何使用键盘进行更改的人；如果您走这条路线，请确保您也赶上了这些事件。

【解决方案2】：

由于@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 }} });
}

【讨论】：

太棒了！它可以在很多场景中使用。只是一件事，应该这样使用：.extend({ confirmable: { message: "Are you sure?", unless: function() { return new Date().getMonth() == 2 }} });
不错！这是一个精心设计的想法。