KnockoutJS：对虚拟元素使用嵌套条件 if 语句答案

【问题标题】：KnockoutJS: Using nested conditional if statements for virtual elementsKnockoutJS：对虚拟元素使用嵌套条件 if 语句
【发布时间】：2012-09-01 02:48:05
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery mvvm knockout.js

【解决方案1】：

问题出在这个...

<!-- 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 -->

【讨论】：

如果视图模型永远不会包含“notiems”集合怎么办？ if 语句不应该处理空集合吗？
问题是淘汰赛试图将您的noitems 属性绑定到foreach。 if 语句纯粹是一个 UI 条件，它表示“如果有一个 noitems 属性不为 null 或未定义，则将此标记添加到 DOM”

【解决方案2】：

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

第一个问题

第一个问题在于 items 是一个 observableArray。因为这个事实，当你测试时

<!-- ko if: items -->

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

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

第二个问题

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

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

【讨论】：