checkbox knockout点击绑定无法正常工作

Posted 2021-05-05

我知道淘汰赛期望我们在绑定到true事件的函数中返回click以检查/取消选中复选框。

我尝试了以下code，但它没有检查复选框。我可以使用匿名计算函数显示值，但我的数组可能很大，我不想保持性能开销。

这样做还有其他办法吗？或者我做错了吗？

编辑：添加代码

html

<div data-bind="foreach: array">
    <div data-bind="foreach: $data.child">  
        <input type="checkbox" data-bind="checked: isChecked, click: function(data, event){$parentContext.$parent.clickBox(data, event, $parent)}">
        <span data-bind="text: $data.value"></span>    
    </div>
   <p data-bind="text: label"></p>
</div>

JS

var mainModel = function(){
  var self = this;  
  self.isChecked = ko.observable(true);  
  self.clickBox = function(data, event, $parent){
    var j=0;
    for(var i=0; i<$parent.length; i++){
        if($parent[i].isChecked()){
        j++;
      }
    }
    $parent.label(j);
    return true;
  }

  self.array = ko.observable(
  [
    {child: [
        {value: 'a', isChecked: ko.observable(false)},
      {value: 'b', isChecked: ko.observable(false)}],
     label: ko.observable(0)
    },
    {child: [
        {value: 'c', isChecked: ko.observable(false)},
      {value: 'd', isChecked: ko.observable(false)}],
     label: ko.observable(0)
    }
  ]);
}

ko.applyBindings(new mainModel());

答案

您缺少return，请更改以下代码

<input type="checkbox" data-bind="checked: isChecked, 
click:   function(data, event){
$parentContext.$parent.clickBox(data, event, $parent)}">

至

<input type="checkbox" data-bind="checked: isChecked, 
click:   function(data, event){
return $parentContext.$parent.clickBox(data, event, $parent)}">

如果你没有传递返回处理程序，默认情况下，knockout将通过调用阻止该操作

 if (handlerReturnValue !== true) { 
       if (event.preventDefault)
             event.preventDefault();
        else
             event.returnValue = false;
    }