Question

我的HTML下拉如下：

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

我订阅了selectedWorkspace：

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

当用户从下拉列表中选择不同的值时，我想提示他们是否真的想要更改值，因为他们会丢失对当前项目的更改。如果他们说他们不想改变，我不希望更新chosenWorkspace。

我已经尝试了几项内容，包括event: {change: promptUser}到我希望提示用户的下拉菜单，如果他们选择取消，则不会更新任何其他内容。但是，当我调试时，事实证明subscribe在更改事件之前正在执行，因此即使他们取消了chosenWorkspace仍然更改了。

有没有办法当用户在下拉列表中切换值时，我可以提示他们并在他们选择时停止更改？

Answer 1

您可以尝试使用计算的观察值，以便在write部分设置确认信息：

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)

在你的HTML中：

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

这是小提琴：https://jsfiddle.net/j9opb5bc/1/

如何在使用knockout js更改下拉列表选择之前提示用户

1 个答案: