knockout.js:If和foreach绑定,检查可观察数组的真值
问题描述:
我在使用if和for每个绑定的小细节时遇到了麻烦。我希望有人能指出一些明显的东西给我。knockout.js:If和foreach绑定,检查可观察数组的真值
我有一个空数组,使用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)
的真值为。任何意见,将不胜感激。
当然它是如此简单。哇靠。谢谢。 –