KnockoutJS:对虚拟元素使用嵌套的条件if语句

时间:2012-09-07 08:22:58

标签: javascript jquery mvvm knockout.js

我想使用虚拟元素循环遍历集合,但前提是集合存在于视图模型中。我最初的猜测是添加一个虚拟if后跟一个虚拟foreach如下:

<!-- ko if: items -->
    <!-- ko foreach: items -->
        <span data-bind="text: $data"></span>
    <!-- /ko -->
<!-- /ko -->

使用给定的视图模型,如果集合存在,我的视图模型会正确绑定。但由于某种原因,如果没有,KnockoutJS抛出一个异常,说我的集合没有定义。这是有道理的,除非我把foreach声明拿出来。 if语句然后作为例外工作,如果集合不存在则不绑定。我在http://jsfiddle.net/danlister/qhL7e/给出了一个更好的例子。

2 个答案:

答案 0 :(得分:4)

你的小提琴提出了两个不同的问题。

第一个问题

首先,物品是一个observableArray。因为你在

上进行测试时有这个事实
<!-- ko if: items -->

它总是返回true,因为observableArray只是一个函数调用。要解决此问题,您可以检查数组是否为空,因为您知道items数组将始终存在,例如

<!-- ko if: items().length !== 0 -->

第二个问题

就我的知识而言,第二个问题(在小提琴中引用noitems数组)是无法完成的。这是因为在第一次将绑定应用于页面时,它会计算所有if语句,并且只有在其中一个可观察变量发生更改时才会更新它们。由于阵列在创建时不存在,因此永远不会重新评估。


我创造了一个小提琴来展示这两种情况:http://jsfiddle.net/Rynan/3UMTM/。注意当你删除第一个问题的数组中的所有元素以及当你切换noitems布尔值时,即使文本更新,“taa-daa”也不会出现的情况下,“test”会如何消失。

答案 1 :(得分:0)

问题在于......

<!-- ko if: noitems -->
    <!-- ko foreach: noitems -->
        <span data-bind="text: $data"></span>
    <!-- /ko -->
<!-- /ko -->

您需要在视图模型中定义noitems成员。

编辑

你可能会做这样的事情来绕过它 - 我还没试过。

<!-- ko if: noitems -->
    <!-- ko foreach: noitems && noitems() -->
        <span data-bind="text: $data"></span>
    <!-- /ko -->
<!-- /ko -->