javascript - 更改 'checked' 属性不会更改 View 模型

Question

我正在用 Knockout 进行实验，这是 JSFiddle

单选按钮具有与 View 模型的enableMe 属性的数据绑定(bind)。如果我单击单选按钮，它会更新 enableMe 属性并触发“选中的”数据绑定(bind)。

我想做的是，当我更改单选按钮的 checked 属性(在按钮单击事件上)并查看 View 模型是否发生变化。它不会改变。

这是为什么呢？需要知道在这种情况下 knockout 是如何运作的。

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>

Answer 1

几个问题:

1. 使用 KO 时不要操作 DOM。相反，操作 View 模型，让 KO 为您处理 DOM 更新。
2. 您有一个单选按钮输入(没有 value 属性!)，但似乎想要绑定(bind)一个 bool 值，这将 require extra work .
3. 您可以使用 onclick 属性，其中还有一个 click 绑定(bind)处理程序。

如果您坚持忽略 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>