IE11でko.protectedObservableの問題

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/