剔除复选框列表可见性和值控制答案

【问题标题】：Knockout Checkbox List Visibility and Value Control剔除复选框列表可见性和值控制
【发布时间】：2017-10-16 15:41:31
【问题描述】：

我的表单有一个用户可以注册的群组列表。其中一些组包含用户也可以注册的子组。我想使用 Knockout JS 来控制子组复选框的可见性，使其仅在选中元组时可见。我使用visible 绑定完成了这项工作。但是，我还需要能够读取复选框的值，并且在跨模型的多重绑定方面遇到了一些问题。

我的复选框的一般结构是：

<div id="CheckBoxArray">
  <input type='checkbox' value='Group1' id='chkboxGroup1' data-bind='checked: Group1SubsVisible'/>
    <div id=Group1SubGroups data-bind='visible: Group1SubsVisible'/>
      <input type='checkbox' value='SubGroup1'/>
      ...
    </div>
    ...
</div>

<script>
  function VisibilityModel(){
    this.Group1Visible = ko.observable(false);
    ...
  }

  function ApplicantModel(){
    this.FirstName = ko.observable();
    ...
    this.CheckedGroups = ko.observableArray();
  }
</script>

我省略了无关信息和重复元素。

我遇到的问题是，当我更改元组数据绑定以尝试捕获它们的值以及控制可见性时，子组永远不会变得可见。

<input type='checkbox' value='Group1' id='chkboxGroup1' data-bind='checked: Group1SubsVisible, checked: CheckedGroups'/>

在控制台中检查模型报告“可见”变量的最后一个值为 false。我最初认为该问题与在同一范围内拥有两个模型有关，因此我将每个模型的 ko.applyBindings 拆分为查看单独的 div，并将 CheckedGroups 移动到 VisibilityModel 中。这对我的问题没有影响，所以我在这里将其恢复为原始代码。

【问题讨论】：

data-bind='checked: Group1SubsVisible, checked: CheckedGroups' 两个检查绑定？！你的意思是在那里使用visible 吗？
不，这是故意的。这两个绑定应该在不同的模型上。我想让一个绑定更新一个变量来控制其他复选框的可见性，另一个绑定将复选框的值添加到复选框列表中。单独使用绑定是不可能的吗？
不。我认为这是不允许的。
啊，真可惜。那么我将不得不使用某种回调来完成它。我有一种感觉，来自不同模型的重叠绑定可能是个问题。感谢您的反馈。

标签： knockout.js data-binding

【解决方案1】：

您可以使用indexOf 方法来检查group 的值是否存在于CheckedGroups 数组中，而不是使用布尔属性进行visible 绑定：

<input type='checkbox' value='Group1' id='chkboxGroup1' data-bind='checked: CheckedGroups' /> 
Group1
<div id="Group1SubGroups" data-bind="visible: CheckedGroups.indexOf('Group1') > -1">
  <input type='checkbox' value='SubGroup1'/> Group1 Sub 1
</div>

<input type='checkbox' value='Group2' id='chkboxGroup2' data-bind='checked: CheckedGroups' /> 
Group2
<div id="Group1SubGroups" data-bind="visible: CheckedGroups.indexOf('Group2') > -1">
  <input type='checkbox' value='SubGroup1'/> Group2 Sub 1
</div>

在你的视图模型中：

var viewModel = function() {
   var self = this;
   self.CheckedGroups = ko.observableArray(["Group1", "Group3"])
}

Here's a fiddle

【讨论】：

这确实解决了我的问题，实际上。感谢您的帮助！