如何使用敲除JS更改下拉选择之前提示用户

Question

I have a drop down in my HTML like this:

<select id="test" style="padding: 5px; width: 200px;" 
    data-bind="options:workspaces,
    optionsText:'Category',
    value:chosenWorkspace,
    "></select>

And I have a subscribe on the chosenWorkspace:

self.chosenWorkspace.subscribe(function (newWorkspace) {
    if (newWorkspace) {
        ko.mapping.fromJS(ko.mapping.toJS(newWorkspace), {}, self.workspace);
        self.isDirty = ko.dirtyFlag(self.workspace);
    }
});

When the user selects a different value from the drop down, I want to prompt them if they really want to change values since they would lose changes to the current item. If they say they don't want to change, I don't want the chosenWorkspace to be updated.

I've tried several things including an event: {change: promptUser} to the drop down that I was hoping would prompt the user and if they choose to cancel it would not update anything else. However, when I debugged it turned out that the subscribe was executing before the change event, so even if they cancelled the chosenWorkspace still changed.

Is there a way that when the user switches values in the drop down I can prompt them and stop the change if they choose that?

Answer 1

You may want to try with a computed observable so you can set up your confirmation in its write part:

var model = function() {
  var self = this;

  self.workspaces = [{ Category: 'a'},{ Category: 'b'},{ Category: 'c'}];
  self.chosenWorkspace = ko.observable();

    this.computedChosenWorkspace = ko.computed({
        read: function () {
            return self.chosenWorkspace();
        },
        write: function (value) {
            //We check for null value to avoid showing the confirmation the first time
            if(self.chosenWorkspace() == null || confirm("Are you sure?")){
                self.chosenWorkspace(value);
            }
            else{
                //Notify so the control keep its old value
                self.computedChosenWorkspace.notifySubscribers();
            }
        },
        owner: this
    });


};

var m = new model();

ko.applyBindings(m)

And in your HTML:

<select id="test" style="padding: 5px; width: 200px;" 
    data-bind="options:workspaces,
    optionsText:'Category',
    value:computedChosenWorkspace"></select>

Here's the fiddle: https://jsfiddle.net/j9opb5bc/1/