Custom Knockout js binding to confirm before variable change Custom Knockout js binding to confirm before variable change

Having a user confirm a selection is a very common occurrence when an action is performed. In this Knockout js tutorial I'm going to demonstrate how to ask the user to confirm their choice. Only when the user has clicked OK will the observable value be changed. This example will leverage the ko.extender to create a custom Knockout extender.

Custom Knockout JS Extender

Creating a custom Knockout js Extender

The common JavaScript code to ask a user to confirm a selection is to use the function confirm wrapped in an if statement as follows:

if (confirm('Do you want to proceed?')) {
   // Do action

I am going to now leverage this inside a custom KO extender. Here is the full binding:

ko.extenders.confirmable = function (target, options) {
    var message = options.message;
    var unless = options.unless || function () { return false; }
    var result = ko.computed({
        read: target,
        write: function (newValue) {
            var current = target();
            if (unless() || confirm(message)) {
            } else {
    }).extend({ notify: 'always' });
    return result;

To understand the inside, I'll quickly demonstrate how this function is used. Inside your ViewModel when you are defining your ko observable, you apply a secondary function called extend as follows:

var myObservable =  ko.observable().extend({
	confirmable: {
		message: "Are you sure you wish to continue?"

Using the extend function you tell Knockout that you are implementing the confirmable function and are passing in a JavaScript object with a property called message with the string to be displayed in the confirm dialog.

In the custom ko extender, the observable - in this case - myObservable is wrapped in a ko.computed and when the user confirms your observable is set; otherwise, the variable myObservable is left unchanged.

As an added bonus, there is an extra parameter called unless that can be used to only call the confirm dialog when a specific condition is met. For example, perhaps you only want to ask for confirmation when a radio button is going from false to true. In this scenario, the definition can be changed as follows:

var myObservable =  ko.observable().extend({
	confirmable: {
		message: "Are you sure you wish to continue?",
		unless: function() {
			return myObservable();

Because of this line: if (unless() || confirm(message)) the confirm dialog will only be called if the result of unless() is true.

Published on Feb 9, 2020

Tags: confirm() | Knockout js Tutorial | data binding

Related Posts

Did you enjoy this article? If you did here are some more articles that I thought you will enjoy as they are very similar to the article that you just finished reading.


Learn how to code in HTML, CSS, JavaScript, Python, Ruby, PHP, Java, C#, SQL, and more.

No matter the programming language you're looking to learn, I've hopefully compiled an incredible set of tutorials for you to learn; whether you are beginner or an expert, there is something for everyone to learn. Each topic I go in-depth and provide many examples throughout. I can't wait for you to dig in and improve your skillset with any of the tutorials below.