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

KnockoutJS: Using nested conditional if statements for virtual elements

本文关键字：嵌套 条件 if 语句 虚拟 元素 KnockoutJS      更新时间：2023-09-26

我想使用虚拟元素在集合中循环，但前提是该集合存在于视图模型中。我最初的猜测是添加一个虚拟if，后面跟着一个虚拟foreach，如下所示：

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

对于给定的视图模型，如果集合存在，我的视图模型将正确绑定。但出于某种原因，如果没有，KnockoutJS会抛出一个异常，说我的集合没有定义。这是有意义的，除非我去掉foreach语句。如果集合不存在，则if语句将作为exception工作，并且不绑定。我在http://jsfiddle.net/danlister/qhL7e/.

您的fiddle提供了两个不同的问题。

第一个问题

第一个原因是items是一个observableArray。因为这个事实，当你在上测试时

<!-- ko if: items -->

它将始终返回true，因为observableArray只是一个函数调用。为了解决这个问题，你可以检查数组是否为空，因为你知道项目数组总是在那里，比如

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

第二个问题

据我所知，第二个问题（引用小提琴中的noitems数组）无法解决。这是因为在第一次将绑定应用于页面时，它会计算所有if语句，并且只有在其中一个可观察变量发生变化时才会更新它们。由于数组在创建时不在那里，因此永远不会重新评估它。

我制作了一把小提琴来展示这两种情况：http://jsfiddle.net/Rynan/3UMTM/.请注意，当您为第一个问题删除数组中的所有元素时，"test"是如何消失的，以及当您切换noitems布尔值时，即使文本更新，"Taa-daa"也是如何从不出现的。

问题在于。。。

<!-- 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 -->
相关文章：