IE10事件:(更改)确认未将值重置为先前值

时间:2016-02-17 20:54:37

标签: javascript internet-explorer knockout.js

我的Internet Explorer存在问题(现在是v 10)我有2个单选按钮是/否带有确认框,如果用户单击取消,则该值应该返回原始值

Ex:是默认值。用户点击否,弹出显示 - 用户取消应该回到是。 问题......价值不会改变它停留在否

我的代码在FireFox和GoogleChrome上正常工作

请参阅jsFiddle(您必须在IE10中打开它我认为......)

enter code here

https://jsfiddle.net/grosjambon/nxy0g1cg/

如果jsfiddle不起作用,请评论

EDIT1

在这里发现了一些有用的东西,但有一些问题。当我尝试以Knockout在Click Binding中执行的方式将多个参数绑定到函数时,当" person"确认更改值,单选按钮中的值不会更新(两个收音机里面都没有任何内容)

HTML

<input class="radio-inline" type="radio" data-bind="click: function(data,event){confirmCheck2(lang('Options1'),false, '1Group0', data, event)}, checked: IsSomething,checkedValue: true" />
 <input class="radio-inline" type="radio" data-bind="click: function(data,event){confirmCheck2(lang('Options1'),true, '1Group0', data, event)}, checked: IsSomething,checkedValue: false" />

ViewModel(Knockout)Ok确认有问题的方法(两个无线电都是空的)

 m.confirmCheck2 = function (propertyName, inputValue, stepName, data, event) {
                console.log(event);
                if (!confirm("Are you sure?")) {
                    event.stopImmediatePropagation();            
                    return false;
                }
                return true;
            }

工作但没有额外属性的方法

HTML

 <input class="radio-inline" type="radio" data-bind="click: confirmCheck, checked: IsITARAndCGP,checkedValue: true" />  

视图模型

m.confirmCheck = function (data, event) {
                console.log(data);
                console.log(event);
                if (!confirm("Are you sure?")) {
                    event.stopImmediatePropagation();
                    return false;
                }
                return true;
            }

编辑2 所以在回复之间我找到了一个使用Roy的旧答案的解决方案。 P.S如果我们使问题复杂化:所以我有多个属性m.Property1 m.Property2,m.Property3。当1为True时所有其他都为假,如果True属性为False,则一切都为假。只有1个值是真的。

因此,在您更改值时,使用之前的RoyJ答案,它将触发具有Confirm Popup的每个属性的订阅,因为所有3属性都会触发相同的确认。

    var showPopup = true; 
    m.Property1.subscribe(function () {
                var inputValue = m.Property1();
                if (showPopup) {
                    if (confirm(f.lang("Message"))) {
                        showPopup = false;//Disable showPopup because we set value inside resetValueFunction
                        resetValueWithCondition("Property1"), inputValue);
                    } else { // if cancel
                        showPopup = false;
                        m.Property1(!inputValue);
                        return true;//Exit code
                    }
                }
                showPopup = false;//Disable showPopup because we set value inside resetValueFunction
                resetValueWithCondition("Property2", inputValue);
                showPopup = true;

            });
            m.Property2.subscribe(function () {
                var inputValue = m.Property2();
                if (showPopup) {
                    if (confirm(f.lang("Message"))) {
                        showPopup = false;//Disable showPopup because we set value inside resetValueFunction
                        resetValueWithCondition("Property2", inputValue);
                    } else { // if cancel
                        showPopup = false;
                        m.Property2(!inputValue);
                        return true;//Exit code
                    }
                }

                showPopup = true;

            });

函数resetValueWithCondition

function resetValueWithCondition(propertyName,inputValue) {
                if (!m.Property1() && !m.Property2()) {//In this If I hide every field in my form and set Property 1 and Property2.... to false.
                    //m.Step1Visiblity(false);  
                    resetFormValueAfterStepPosition('1Group0');//Reset all form field      
                    setPropertyValue(false, false);//Here is simply m.Property1(false) etc...
                } else {
                    resetFormValueAfterStepPosition('1Group0');//Reset all form field
                    if (inputValue == true) {//Only perform this method if Property goes to True, otherwise don't execute (otherwise it trigger the confirm box multiple time when I Set Propertyvalue
                        m.visibilityLogic(propertyName);//Set PropertyValue to either true,false or false,true if is it property1 or property2
                    }

                }

            }

1 个答案:

答案 0 :(得分:1)

你过分关注表单并且对你的模型不够。而不是摆弄与单选按钮相关的事件,与您的观察者一起工作。在这种情况下,您需要在数据项和前端之间使用一个图层来检查确认。

var ViewModel = function() {
  var self = this,
    savedHS01 = ko.observable(true);

  self.HS01 = ko.computed({
    read: savedHS01,
    write: function(newValue) {
      if (confirm("Are you sure?")) {
        savedHS01(newValue);
      }
      self.HS01.notifySubscribers();
    }
  });
  self.HS02 = ko.observable();
};

ko.applyBindings(new ViewModel());
body {
  font-family: arial;
  font-size: 14px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>
  <input class="radio-inline" type="radio" data-bind="checked: HS01, checkedValue:true" />
  <span class="form-control-inline">yes</span>

  <input class="radio-inline" type="radio" data-bind="checked: HS01, checkedValue:false" />
  <span class="form-control-inline">no</span>
  <br/>Hs01:
  <input data-bind="value: HS01" />
  <br/>ShouldBe:
  <input data-bind="value: HS02" />
</div>