Question

你能帮我解决IE11中的奇怪问题吗？主要问题，有时当你点击单选按钮并确认更改值时，它实际上不适用于可见绑定。这意味着价值没有改变。我不知道为什么它在IE浏览器中不起作用，例如在Chrome中一切都运行得很好。

HTML

<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
<div data-bind="visible: wantsSpam">
    Preferred flavor of spam:
    <div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor, event: { change: onChange }" /> Cherry</div>
    <div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor, event: { change: onChange} " /> Almond</div>
    <div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor, event: { change: onChange} " /> Monosodium Glutamate</div>
</div>
<span data-bind="visible: isVisible">Text</span>

的JavaScript

ko.protectedObservable = function (initialValue) {
    //private variables
    var _actualValue = ko.observable(initialValue);
    var _tempValue = initialValue;

    //computed observable that we will return
    var result = ko.computed({
        //always return the actual value
        read: function () {
            return _actualValue();
        },
        //stored in a temporary spot until commit
        write: function (newValue) {
            _tempValue = newValue;
        }
    }).extend({
        notify: "always"
    });

    //if different, commit temp value
    result.commit = function () {
        if (_tempValue !== _actualValue()) {
            _actualValue(_tempValue);
        }
    };

    //force subscribers to take original
    result.reset = function () {
        _actualValue.valueHasMutated();
        _tempValue = _actualValue(); //reset temp value
    };

    return result; };

var viewModel = function () {
    var self = this;
    self.wantsSpam = ko.observable(true);
    self.spamFlavor = ko.protectedObservable();
    self.onChange = function () {
        debugger;
        var conf = confirm("Do you want change?")
        if (conf) {
            self.spamFlavor.commit();
        }
        else {
            self.spamFlavor.reset();
        }
    };
    self.isVisible = ko.pureComputed(function () {
        if (self.spamFlavor() === "cherry") {
            return false;
        }
        else {
            return true;
        }
    }, this); };

ko.applyBindings(viewModel());

这是我在jsfiddle中的代码：

https://jsfiddle.net/stanislavmachel/9s5uw75g/3/

请尝试更好地了解IE11中出现的行为问题。

Answer 1

问题是您在更改处理程序之前尝试更改元素的值，然后才能解决更改。它会更容易拦截点击，如果通过从处理程序返回true来确认事件，则将事件传播到控件。如果它被取消，那么您将希望通过返回false来阻止传播。

<div data-bind="visible: wantsSpam">
    Preferred flavor of spam:
    <div><input type="radio" name="flavorGroup" value="cherry"
                data-bind="checked: spamFlavor, click: confirmChange"> Cherry</div>
    <div><input type="radio" name="flavorGroup" value="almond"
                data-bind="checked: spamFlavor, click: confirmChange"> Almond</div>
    <div><input type="radio" name="flavorGroup" value="msg"
                data-bind="checked: spamFlavor, click: confirmChange"> Monosodium Glutamate</div>
</div>

var viewModel = function () {
    var self = this;
    this.wantsSpam = ko.observable(true);
    this.spamFlavor = ko.protectedObservable();
    this.isVisible = ko.pureComputed(function () {
        return this.spamFlavor() !== "cherry";
    }, this);

    this.confirmChange = function () {
        var confirmed = confirm("Do you want change?");
        if (confirmed)
            self.spamFlavor.commit();
        else
            self.spamFlavor.reset();
        return confirmed;
    };
};

https://jsfiddle.net/9s5uw75g/9/

IE11中ko.protectedObservable的问题

1 个答案: