我正在用 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>
最佳答案
几个问题:
- 使用 KO 时不要操作 DOM。相反,操作 View 模型,让 KO 为您处理 DOM 更新。
- 您有一个单选按钮输入(没有
value
属性!),但似乎想要绑定(bind)一个 bool 值,这将 require extra work . - 您可以使用
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>
关于javascript - 更改 'checked' 属性不会更改 View 模型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37897130/