3

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

function MyViewModel() {
  var self = this;

  self.ok = ko.observable();

};

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

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

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

更改不会出现在 viewmodel 的属性中。但是当我单击复选框时一切正常。

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

有什么解决方法吗？

4

2 回答 2

5

您的问题是 ko 订阅了已检查绑定click中的事件：

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

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

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

我不知道如何使用纯 javascript 但使用 jQuery 你可以编写：

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

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

于 2012-10-22T10:04:39.997 回答
1

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

如果您需要通过单击更改值，则必须使用 ok 可观察值。

有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);

​​您可以在这个小提琴中看到它。

于 2012-10-22T10:05:42.647 回答