Knockout.js 父/子发票逻辑问题

我陷入了父母/孩子被击倒的境地。我有一个从数据列表（发票和详细信息）创建的表。我需要在选中表中的某些复选框时执行特定操作

目前，我有很多工作时，它的框被选中。但当复选框未选中时，只有少数几个目标中的一个起作用。我还没弄明白如何让它工作

下面是我的照片截图

（来源：）

目标

当其中一个或两个“使用信用”复选框都被选中时：

• 禁用当前上下文中发票和明细项目的“应用”输入-当前正在工作
• 将顶部金额输入中任何和所有复选框中的到期总金额（贷记金额）作为正值-当前有效
• 禁用收音机（支票、信用卡、其他）当前正在工作

当其中一个或两个“使用信用”复选框未选中时：

• 在当前上下文中为发票和明细项目启用“应用”输入-不工作
• 仅从顶部金额输入中删除当前上下文的已检查应付金额-当前正在工作
• 启用收音机-不工作

感谢您的帮助。这是我的工作指南：

这是选中复选框时当前对UI进行更新的代码：

self.SelectedItems.subscribe(function(datalist){
  //console.log(ko.toJSON(item));
  var totalAmountSelected = 0;

  console.log("selected list: " + self.SelectedItems().length + " - datalist: " + datalist.length);

  ko.utils.arrayForEach(datalist, function(node){
    totalAmountSelected += parseFloat(node.amountdue() * -1);
    node.Disable(true);
    node.Parent.Disable(true);
    self.Disable(true);
  });

  self.Amount(totalAmountSelected);

});

---

这里有太多的代码要显示，所以请看小提琴。

我提出了一种方法，使用绑定到复选框的布尔可观察值与

ko.computed

组合来收集所有选中的详细信息

目前，您正试图将选中的“使用信用”框的每个值添加到一个数组中

在这种方法中，每个细节都有一个

useCredit

可观察到的

true

或

false

。在父视图模型中，如果至少有一个细节具有

useCredit（）===true

，则会有一个计算数组进行计算

实施： 在

详细信息中

：

self.useCredit = ko.observable(false);

使用信用卡复选框时，如下所示：

<td>
  <div data-bind="visible: amountdue() < 0" class="usecredit">
    <input type="checkbox" data-bind="checked: useCredit" /> Use Credit
  </div>
</td>

几乎相同的代码可用于

支付

：

self.useCredit = ko.computed(function() {
  return self.invoices().some(function(invoice) {
    return invoice.useCredit();
  })
});

现在，您可以将单选按钮的disable属性绑定到

useCredit

或将其重命名为

disable

以下是在您的小提琴中实现的这些更改：

---

---

另外，如果我是你，我会删除更改事件数据绑定并使用订阅/计算。

这很接近。我喜欢您的想法，即使用计算的useCredit来处理禁用状态，我只需要反转数据绑定属性的值。您的解决方案在加载表单时禁用了详细信息输入，此时应启用这些输入，并且仅在选中复选框时才禁用这些输入。另外，我使用该数组作为复选框的原因是收集到期金额，并将所有选中的金额合计到顶部金额字段中，这一点现在还没有完成。我将查看是否可以根据需要重构您的代码。如果您将

some

替换为

filter

，Computed将返回一个将

useCredit

设置为true的详细信息/发票数组。我喜欢你的新小提琴。禁用状态在加载时仍然不正确，但我修复了它，并进行了一些调整，使其能够正常工作。进入顶部金额字段的值是详细信息的总和，而它必须是到期金额。容易改变。这是工作表。谢谢你的帮助。你救了我。

self.useCredit = ko.computed(function() {
  return self.invoices().some(function(invoice) {
    return invoice.useCredit();
  })
});