更改“已检查”属性不会更改视图模型答案

【问题标题】：Changing 'checked' property does not change view model更改“已检查”属性不会更改视图模型
【发布时间】：2016-10-20 05:02:51
【问题描述】：

我正在用 Knockout 做一个实验，这里是 JSFiddle

单选按钮具有与视图模型的 enableMe 属性的数据绑定。如果我单击单选按钮，它会更新 enableMe 属性并触发“已检查”数据绑定。

我想要做的是，当我更改单选按钮的checked 属性（在按钮单击事件上）并查看视图模型是否更改时。它不会改变。

这是为什么呢？需要知道在这种情况下淘汰赛是如何工作的。

var ViewModel = function() {   
    
    this.enableMe = ko.observable(false);    
};
 
var myVM = new ViewModel();
 
ko.applyBindings(myVM); 

function clickme() {
   //Changing the checked state does not change VM
   document.getElementById("myradio1").checked = true;
   //Changing the VM works
   //myVM.enableMe(true);
   
   alert("Alert Message OnClick");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
EnableMe: <input id="myradio1" type="radio" data-bind='checked: enableMe'/><br/>
Enable status: <span data-bind='text: enableMe'></span>
<br/>
<button id="button1" onclick="clickme();">Click To Disable</button>

【问题讨论】：

使用 KO 时不应手动操作 DOM。您应该使用myVM.enableMe(true); 更新您的虚拟机

标签： javascript knockout.js

【解决方案1】：

几个问题：

使用 KO 时不要操作 DOM。改为操作视图模型，让 KO 为您处理更新 DOM。
您有一个单选按钮输入（没有value 属性！）但似乎想要绑定一个布尔，这将require extra work。
您使用onclick 属性，其中还有一个click 绑定处理程序。

如果您坚持忽略 1 并自己操作 DOM，请以 KO 会收到更改通知的方式进行操作。由于您无论如何都使用 jQuery，我建议使用它的 API 来触发输入事件。这是修复/解决问题 2 和 3 的演示：

var ViewModel = function() {
  this.enableMe = ko.observable(false);
};
 
var myVM = new ViewModel();
 
ko.applyBindings(myVM); 

function clickme() {
  // This is NOT recommended! Check the second example.
  $("#mycheck1").trigger("click");
}

pre { font: 11px consolas; padding: 5px; background: #fafafa; border: 1px solid #ddd; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

EnableMe: <input value="true" id="mycheck1" type="checkbox" data-bind='checked: enableMe'/><br/>
Enable status: <span data-bind='text: enableMe'></span>
<br/>
<button id="button1" data-bind="click: clickme">Click To Toggle</button>
<hr>
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

但是，您应该使用这样的方法：

var ViewModel = function() {
  var self = this;
  
  self.enableMe = ko.observable(false);
  
  self.clickme = function() {
    self.enableMe(true);
  }
};
 
var myVM = new ViewModel(); 
ko.applyBindings(myVM);

pre { font: 11px consolas; padding: 5px; background: #fafafa; border: 1px solid #ddd; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

EnableMe: <input value="true" id="mycheck1" type="checkbox" data-bind='checked: enableMe'/><br/>
Enable status: <span data-bind='text: enableMe'></span>
<br/>
<button id="button1" data-bind="click: clickme">Click To Toggle</button>
<hr>
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

【讨论】：