Knockout.js Knockout无法使用函数代替ko.computed（）

我有一个UI，它显示一个敲除绑定的复选框和一个HTML表。根据复选框的设置和每行记录的某些属性的值，我希望隐藏某些行

我通过在TR上使用knockout的可见绑定来解决这个问题：

<tr data-bind="visible: $root.showRowBasedOnFulfillmentCriteria">

如您所见，我采用了一种非常简单的方法，只返回一个布尔值，看看是否可以从计算结果控制行的可见性。返回false隐藏行；return true显示它们。但当我尝试将其作为函数时，会发生以下情况：

       self.showRowBasedOnFulfillmentCriteria = function () {
       return false;    
    };

在这里，作为函数写入，即使总是返回false，所有行都显示。换句话说，函数的返回值似乎没有任何意义。在我能够充实出函数的真实代码之前，我需要知道我可以使用它来替换一个ko.computed

[编辑：使用Chrome的调试器，在函数中设置断点，函数似乎从未被调用；当我将函数绑定到knockout中的visible属性时，标记似乎总是假定值为TRUE。请继续阅读…]

我是否误解了ko.computed可以很容易地用函数替换的说法

该函数在与绑定到复选框的可观察对象相同的viewmodel中定义，并且（如果未注释掉），可以替代该函数并工作的ko.computed版本

如果我还没有写太多，那么我对函数的最终目标是：

self.showRowBasedOnFulfillmentCriteria = function (flag1, flag2) {
       return self.isOnlyFufillmentChecked && flag1 && flag2;    
    };

TR绑定将如下所示：

<tr data-bind="visible: $root.showRowBasedOnFulfillmentCriteria(Criteria1, Criteria2)">

---

你绝对可以做到这一点。只需在视图模型上创建一个函数，并将其输出传递到

visible

绑定。可以将当前行作为参数传入，也可以在viewmodel上引用特性

示例代码：

function ViewModel() {
  var vm = this;

  vm.hideNoFooRows = ko.observable(false);
  vm.row = ko.observableArray([
    { foo: true, val: 'Row 1' },
    { foo: false, val: 'Row 2' },
    { foo: true, val: 'Row 3' },
    { foo: false, val: 'Row 4' },
    { foo: true, val: 'Row 5' }
  ]);

  vm.isVisible = isVisible;

  function isVisible(row) {
    let hide = ko.unwrap(vm.hideNoFooRows);
    return hide ? row.foo : !hide;
  }
}

ko.applyBindings(new ViewModel());

HTML:

---

JSFiddle:

您可以将函数传递给ko.computed，但只需在那里检查您的观测值即可。这能满足你的需求吗？谢谢你，蒂姆。不过，我的两个参数是不可观测的。它们是通过在构建tbody时使用foreach进行迭代而派生的对象的成员。有趣的是，我可以将函数传递给计算机。也许我能想出一种方法来传递我的函数，把不可观测的东西传递给计算机？我会试一试，然后再报告。我主要担心的是，由于某种原因，我在视图模型中编写的函数似乎无法识别（由于它返回false，这些行仍然显示：-（）这应该可以通过

computed

实现。您可以创建HTML和视图模型的最小片段或小片段吗？基本上，我想看看表是如何形成的，哪些属性应该用作标志。目前还不清楚您是希望

showRowBasedOnFulfillmentCriteria

在每个行对象内还是在父对象中查看模型您的JSFIDLE是纯金兄弟Woodrow。我用它来反向工作，看看我自己使用的函数哪里出了问题。

<tr data-bind="visible: $root.showRowBasedOnFulfillmentCriteria(Criteria1, Criteria2)">

function ViewModel() {
  var vm = this;

  vm.hideNoFooRows = ko.observable(false);
  vm.row = ko.observableArray([
    { foo: true, val: 'Row 1' },
    { foo: false, val: 'Row 2' },
    { foo: true, val: 'Row 3' },
    { foo: false, val: 'Row 4' },
    { foo: true, val: 'Row 5' }
  ]);

  vm.isVisible = isVisible;

  function isVisible(row) {
    let hide = ko.unwrap(vm.hideNoFooRows);
    return hide ? row.foo : !hide;
  }
}

ko.applyBindings(new ViewModel());

<table border="1" style="width: 50%">
  <tbody data-bind="foreach: row">
    <tr data-bind="visible: $parent.isVisible($data)">
      <td data-bind="text: val"></td>
      <td data-bind="text: foo"></td>
    </tr>
  </tbody>
</table>