程序更改不会反映在淘汰视图模型中答案

【问题标题】：Programmatical changes will not reflect in knockout viewmodel程序更改不会反映在淘汰视图模型中
【发布时间】：2012-10-12 01:50:51
【问题描述】：

用javascript改变复选框的状态不符合MVVM的精神。但我正在创建一个通用的 javascript 库，以便更好地查看标准控件，如复选框、单选按钮或选择框。基于以下视图模型：

function MyViewModel() {
  var self = this;

  self.ok = ko.observable();

};

var vm = new MyViewModel();
ko.applyBindings(vm);

但是当我以编程方式更改复选框的选中状态时，我遇到了与敲除有关的问题：

document.getElementById('chk').checked = true

更改不会出现在视图模型的属性中。但是当我点击复选框时一切正常。

看http://jsfiddle.net/KWdZB/1/

有什么解决办法吗？

【问题讨论】：

标签： mvvm knockout.js

【解决方案1】：

您的问题是 ko 订阅了 checked binding 内的 click 事件：

ko.utils.registerEventHandler(element, "click", updateHandler);

但是更改checked属性不会触发点击事件，所以不会通知ko。

如果在属性更改后手动触发点击事件，它可以工作...

我不知道如何用纯 javascript 来做，但是用 jQuery 你可以写：

$('#chk').attr('checked', true).triggerHandler('click')

你可以在这个JSFiddle中测试它。

【讨论】：

我会给它一个 +1 :) 对于纯 js，你可以简单地做document.getElementById('chk').click && document.getElementById('chk').click()

【解决方案2】：

这是正常的，因为已检查的绑定处理程序不订阅已检查的更改事件，而是订阅了单击事件处理程序（您可以在已检查的绑定处理程序代码的源文件中查看）。

如果你需要通过点击改变值，你必须使用ok observable值。

有 HTML

<div>
    <input type="checkbox" id="chk" data-bind="checked: ok"/><br>
    <input type="button" id="btnCheck" value="Check" data-bind="click: Check"/>&nbsp;&nbsp;    
    <input type="button" id="btnUnCheck" value="Uncheck" data-bind="click:Uncheck"/> 
</div>
<div>
    Value: <span data-bind="text: ok"></span>    
</div>

还有 javascript：

function MyViewModel() {
    var self = this;

    self.ok = ko.observable();

    self.Check = function(){
      self.ok(true);      
    }

    self.Uncheck = function(){
        self.ok(false);            
    }
};

vm = new MyViewModel();
ko.applyBindings(vm);

你可以在这个fiddle看到它。

【讨论】：