Question

我的表单包含用户可以注册的群组列表。其中一些组包含用户也可以注册的子组。我想使用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'/>

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

Answer 1

您可以使用indexOf方法检查visible数组中是否存在group的值，而不是使用CheckedGroups绑定的布尔属性。 / p>

<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

Knockout复选框列表可见性和价值控制

1 个答案: