javascript - Knockout.js:If 和 foreach 绑定(bind)，检查可观察数组上的真值

Question

我无法理解使用 if 和 for every 绑定(bind)的小细节。我希望有人能指出一些对我来说显而易见的事情。

我有一个空数组，使用 Boolean(observableArray().length)我变得虚假了。那没问题。但是我无法让这种表达式在 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>

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

Answer 1

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

检查Fiddle