Question

我想要一个可重复使用的＆＃34;是/取消＆＃34;单击的元素选项发送＆＃34;评价值得＆＃34; POST，并没有使用丑陋的确认对话框。我在网上搜索得很少，所以我使用knockout.js创建了一个自定义绑定 -

ko.bindingHandlers.confirm = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    var $span = $('<span></span>');
    var settings = ko.utils.unwrapObservable(valueAccessor());

    $span.appendTo($(element));
    $span.text(settings.buttonText);

    $(element).click(function (evt) {

        var $target = $(evt.target);

        //if we're in an anchor tag, prevent questiontext click
        if ($target.hasClass("_confirm") || $target.find("#yes, #cancel").length > 0) {
            return true;
        }

        $span.hide().html(settings.questionText + ' <a class="_confirm" id="yes">yes</a> / <a class="_confirm" id="cancel">cancel</a>').show('fast');
        var submitFunction = settings.submitFunction;

        $(this).find("#yes").on('click', function () {
            //prevent double clicks if event is async
            if ($(this).data('processing')) {
                return;
            }

            $(this).data('processing', true);
            if (typeof (submitFunction) === 'function') {
                //if submitfunction is deferred, double clicks are prevented
                $.when(submitFunction(ko.dataFor(this), evt))
                 .then(function () {
                     $span.hide().html(settings.buttonText).show('fast');
                     $(this).data('processing', false);
                 });

            };
        });

        $(this).find("#cancel").on('click', function () {
            $span.hide().html(settings.buttonText).show('fast');
        });

        return true;
    });
}};

使用：

<a data-bind="confirm: {  questionText:'Are you sure you want to delete this?', buttonText:'delete', submitFunction:$root.deletePaymentMethod }"></a>

对于那些可能一直在寻找的人来说，就是这样。我的问题是，是否有更好的方法来实现＆＃34;确认 - 无对话＆＃34;是/在ko中取消模式而没有混合这么多jquery？

- 谢谢你！

knockout.js自定义绑定是/取消模式

0 个答案: