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

Question

我在使用if和for每个绑定的小细节时遇到了麻烦。我希望有人能指出一些明显的东西给我。

我有一个空数组，使用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并且元素呈现。那么为什么它在评估为假之后不重新渲染呢？我是否清空并向阵列添加不当？我认为这是问题所在，因为如果我从一个填充数组开始并继续推送数据，则<ul>不会更新，但Boolean(truthTest().length)的真值为。任何意见，将不胜感激。

Answer 1

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

检查Fiddle