使用javascript确认敲除点击绑定

Question

除非javascript确认对话框返回true,否则我无法弄清楚如何创建不执行valueAccessor的knockout click绑定.

它可能看起来像这样:

<a data-bind="confirmClick: { message: 'Are you sure?', click: someMethod }">Confirmable link</a>

在内部,confirmClick绑定会执行以下操作:

if (confirm(message)) {
   click();
}

我知道我可以通过将confirm(...)代码放在我的viewModel中来解决这个问题,但这似乎不适合放置那种代码.我可能还可以使用jQueryUI或Bootstrap进行这种确认对话,但我想要一些我可以放入任何项目的东西.

我没有运气地搜索互联网.我甚至查看了淘汰赛点击事件的源代码(https://github.com/knockout/knockout/blob/master/src/binding/defaultBindings/event.js),但它看起来并不友好......

任何帮助都将非常感谢!

Answer 1

您需要创建自定义confirmClick 绑定处理程序,它接收您的消息和单击处理程序并包围确认逻辑:

ko.bindingHandlers.confirmClick = {
    init: function(element, valueAccessor, allBindings, viewModel) {
        var value = valueAccessor();
        var message = ko.unwrap(value.message);
        var click = value.click;
        ko.applyBindingsToNode(element, { click: function () {
            if (confirm(message))
                return click.apply(this, Array.prototype.slice.apply(arguments));
        }}, viewModel);
    }
}

你可以像你描述的那样:

<a data-bind="confirmClick: { message: 'Are you sure?', click: someMethod }">
    Confirmable link</a>

演示JSFiddle.

注意:click.apply如果要保留并将原始click事件处理程序args传递给您自己的单击事件处理程序,则只需要魔术.