Parent/child发票逻辑问题

Question

我被 Knockout 困在了 parent/child 的境地。我有一个 table 从数据列表（发票和详细信息）创建的。当 table 中的某些复选框被选中时，我需要执行特定的操作。

目前，当复选框被选中时，我有很多工作。但是，当复选框未选中时，只有几个目标中的一个有效。我一直无法弄清楚如何让它工作。

下面是我的截图jsfiddle。

_{（来源：kingwilder.com）}

Objective

当一个或两个 "Use Credit" 复选框被 选中时:

在当前上下文中禁用发票和详细信息项目的 "Applied" 输入 - 当前工作
将顶部金额输入的任何和所有复选框中的总应付金额（信用金额）作为正值 - 当前工作
禁用收音机（支票、信用卡、其他）- 当前工作

当一个或两个 "Use Credit" 复选框被 UN-checked:

在当前上下文中为发票和明细项目启用 "Applied" 输入 - 不工作
仅从顶部金额输入中删除当前上下文的应付金额 - 当前有效
启用收音机 - 不工作

感谢任何帮助。这是我的工作 jsFiddle：jsFiddle

这是当前在选中复选框时对 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);

});

此处显示的代码太多，请参阅 fiddle。

Answer 1

我提出了一种方法，它使用绑定到您的复选框的布尔可观察值结合 ko.computed 来收集所有选中的详细信息。

目前，您正在尝试将选中的 "use credit" 框的每个值添加到一个数组中。

在这种方法中，每个细节都有一个 useCredit 可观察值，即 true 或 false。在父视图模型中，有一个计算数组计算是否至少有一个细节具有 useCredit() === true.

实施：

在Detail中：

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>

另一个输入中的 disable 数据绑定可以直接绑定到取反的 useCredit 值：data-bind="disable: !useCredit()"

现在，计算链一直到 payment 视图模型开始。在 Invoice 中，您根据所有详细信息计算 useCredit 属性：

self.useCredit = ko.computed(function() {
  return self.details().some(function(detail) {
    return detail.useCredit();
  })
});

在payment中可以使用几乎相同的代码：

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

您现在可以将单选按钮的禁用属性绑定到 useCredit，或者您可以将其重命名为 Disable。

这是在您的 fiddle 中实施的这些更改：https://jsfiddle.net/qLrgb9bs/

P.S。如果我是你，我会删除更改事件数据绑定并使用 subscriptions/computeds.

Parent/child发票逻辑问题

Parent/child Invoice logic issue

parent-child

knockout.js

实施：