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

knockout.js: the If and foreach bindings, checking for truth value on observable array

本文关键字：数组 观察 检查 js If 绑定 foreach knockout      更新时间：2023-09-26

我很难理解使用if和for每个绑定的一些细节。我希望有人能指出一些显而易见的事情

我有一个空数组，使用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)的真值是。任何建议都将不胜感激。

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

检查Fiddle

相关文章：