Question

59

Knockout click binding with javascript confirm

rated 0 times [ 63] [ 4] / answers: 1 / hits: 6362 / 10 Years ago, thu, july 17, 2014, 12:00:00

I can't figure out how to create a knockout click binding that doesn't execute the valueAccessor unless a javascript confirm dialog returns true.

It's probably look something like this:

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

Internally, the confirmClick binding would do something like:

if (confirm(message)) {

   click();

}

I know I could get around having to do this by putting the confirm(...) code in my
viewModel, but that doesn't seem like the appropriate place to put that kind of code. I could probably also go as far as to do this kind of confirm dialog with jQueryUI or Bootstrap, but I want something I can just drop into any project.

I've scoured the internets with no luck.. I even looked at the source code for knockout's click event (https://github.com/knockout/knockout/blob/master/src/binding/defaultBindings/event.js), but it doesn't look friendly at all...

Any help at all would be greatly appreciated!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

janayr

Add To Favorites

Follow

Total Points: 80

Total Questions: 80

Total Answers: 114

Location: Venezuela

Member since Sat, Aug 22, 2020

4 Years ago

janayr questions

1 NestJS - Increase response timeout for particular http endpoint

Thu, May 19, 22, 00:00, 2 Years ago

1 How to use Lazy query with React-query?

Wed, Dec 29, 21, 00:00, 2 Years ago

1 Discord JS - interactionCreate and messageCreate

Sun, Oct 31, 21, 00:00, 3 Years ago

1 How to change the hover effect for react-bootstrap navbar link?

Fri, Oct 30, 20, 00:00, 4 Years ago

1 Circling motion animation in React Native

Tue, Feb 4, 20, 00:00, 4 Years ago

View All

answered 10 Years ago gordonrockym · Accepted Answer

You need to create your custom confirmClick binding handler which takes your message and your click handler and wrap around the confirmation logic:

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);

    }

}

And you can you it like you have described:

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

    Confirmable link</a>

Demo JSFiddle.

Note: You only need the click.apply magic if you want to preserve and pass over the original click event handler args to your own click event handler.