Question

我被Knockout困在父母/子女的情况中。我有一个从数据列表（发票和详细信息）创建的表。当检查表中的某些复选框时，我需要执行特定操作。

目前，在检查框时，我有很多工作。但是，当取消选中复选框时，只有少数目标中的一个正在工作。我还没有弄清楚如何让它发挥作用。

以下是我jsfiddle的屏幕截图。

jsfiddle http://www.kingwilder.com/images/jsfiddle-payment-use-credit-functionality.png

目标

当其中之一或两者使用＆＃34;使用Credit＆＃34;复选框已选中：

禁用＆＃34;已应用＆＃34;当前上下文中的发票和明细项目的输入 - 当前正在运行
将金额输入中的任何和所有复选框中的总金额（金额）计入正值 - 当前正在工作
停用收音机（支票，信用卡，其他） - 当前正在运作

当其中之一或两者使用＆＃34;使用Credit＆＃34;复选框是联合国检查：

启用＆＃34;已应用＆＃34;当前上下文中的发票和明细项目的输入 - 无法正常工作
仅从最高金额输入中删除当前上下文的已核算金额 - 当前正在运作
启用无线电 - 无效

感谢任何帮助。这是我工作的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);

});

此处显示的代码太多，请查看小提琴。

Answer 1

我提出了一种方法，它使用绑定到您的复选框的布尔可观察量与ko.computed一起收集所有已检查的详细信息。

目前，您正在尝试添加已检查的＆＃34;使用信用卡的每个值＆＃34;盒子到阵列。

在此方法中，每个详细信息都有一个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 viewmodel开始。在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。

以下是您在小提琴中实施的这些更改：https://jsfiddle.net/qLrgb9bs/

P.S。如果我是你，我将删除更改事件数据绑定并使用订阅/计算。

父/子发票逻辑问题

1 个答案:

实现：