knockout.js: If和foreach绑定，检查可观测数组上的真值

Question

我很难把我的头围绕在使用if和每个绑定的小细节上。我希望有人能给我指出一些显而易见的事情。

我有一个空数组，使用Boolean(observableArray().length)可以得到false。这没什么问题。但是，我无法让这种表达式在if绑定中工作。

如果我从一个空数组开始并将数据推送到它，我就不会让html元素出现。如果以填充数组开头，则元素将出现，但在删除数据时将被移除，然后不会重新出现(？)当我把数据加回去时。

下面是一个处理问题的方法：https://jsfiddle.net/Robinrich/rmn7afpm/25/

以下是代码：

function dataForTest(data) {
  var that = this;
  that.data = data;
}

function testViewModel() {
  var that = this;

  //Truth testing array.
  that.truthTest = ko.observableArray([new dataForTest("data")]);
  that.truFal = ko.observable(Boolean(that.truthTest().length));

  //Data to push and remove.
  var data = new dataForTest("data");

  that.pushData = function() {
    that.truthTest().push(data);
    that.truFal(Boolean(that.truthTest().length));
  }

  that.removeData = function() {
    that.truthTest([]);
    that.truFal(Boolean(that.truthTest().length));
  }
}

ko.applyBindings(new testViewModel());

下面是HTML：

<h1> Testing array.length truthiness.</h1>
<button data-bind="click: pushData">Push Data</button>
<button data-bind="click: removeData">Remove Data</button>
<div data-bind="if: truthTest().length">
  <p>Data exists.</p>
  <ul data-bind="foreach: truthTest">
    <li><span data-bind="text: data"></span></li>
  </ul>
</div>
<p> There is data: <span data-bind="text: truFal()"></span>
</p>

我从数据的一个实例开始，它很好。数据会出现。这正是我所期望的，表达式if: truthTest().length计算为true，元素呈现。那么，为什么它在评估为false之后不重新呈现呢？我是否不适当地清空和添加数组？我认为这就是问题所在，因为如果我从填充数组开始并继续推送数据，<ul>不会更新，但是Boolean(truthTest().length)的真值是。如有任何建议，将不胜感激。

Answer 1

您需要将that.truthTest().push(data);更改为that.truthTest.push(data);

检查小提琴