使用 javascript 确认敲除点击绑定

Question

我不知道如何创建不执行 valueAccessor 的敲除点击绑定，除非 javascript 确认对话框返回 true。

大概是这样的：

<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 binding handler，它接收您的消息和您的点击处理程序并环绕确认逻辑：

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 事件处理程序参数并将其传递给您自己的单击事件处理程序，则只需要 click.apply 魔法。

Answer 2

我相信这是 Knockout 定义点击绑定处理程序的地方 -

ko.bindingHandlers[eventName] = {
    'init': function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var newValueAccessor = function () {
            var result = {};
            result[eventName] = valueAccessor();
            return result;
        };
        return ko.bindingHandlers['event']['init'].call(this, element, newValueAccessor, allBindings, viewModel, bindingContext);
    }
}

其中 eventName 是该绑定处理程序的“点击”。我相信将它放在您的视图模型中或加载 Knockout 之后应该可以解决问题 -

ko.bindingHandlers.clickConfirm = {
    'init': function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var newValueAccessor = function () {
            var result = {};
            result.click = function () {
             var result = confirm('You are about to confirm something.');
                // If they press OK,
                console.log('pressed - ', result);
                if (result === true) {
                    console.log('Calling this - ', valueAccessor());
                    valueAccessor()();
                }

            }
            return result;
        };
        return ko.bindingHandlers['event']['init'].call(this, element, newValueAccessor, allBindings, viewModel, bindingContext);
    }
}

http://jsfiddle.net/XhLKD/