`foreach` 为空时剔除默认文本答案

【问题标题】：Knockout default text when `foreach` is empty`foreach` 为空时剔除默认文本
【发布时间】：2013-05-31 19:54:14
【问题描述】：

考虑到similar questions have been answered here，我想知道当列表为空时如何在Knockout data-bind='foreach: list' 中显示默认文本或HTML。

链接页面上的解决方案似乎与此不完全一致，无论如何我想到了另一种方法来尝试使用这样的自定义绑定来完成此操作：

text.default = {
  update: function (element, valueAccessor) {
      var $e = $(element),
          obs = valueAccessor();

      function _check_blank() {
         // the element has content - so we do nothing
         if ($e.text().trim()) {
            return;
         }
         // the element is empty;
         $e.text("Default Text")
      }
      // we use setTimeout to ensure that any other bindings complete 
      // their update
      setTimeout(_check_blank, 0);
  }
}

这似乎适用于简单的可观察对象，但不适用于foreach 绑定，但无论如何我认为上述链接中的extender 建议可能更可取，原因有几个——以上代码会有一些警告。尽管如此，我还是把这个例子放在这里，因为它有点突出了另一种选择和值得深思的地方。

话虽如此，我想知道有哪些选项可以提供默认值来代替 foreach 内容。

一种是在简单的if 中提供一个包装器，如下所示：

<!-- ko if: xyz().length -->
   // foreach
<!-- /ko -->
<!-- ifnot: xyz().length -->
   // default text
<!-- /ko -->

然而，这并不是特别优雅——大量代码混乱。

【问题讨论】：

你可以根据列表是否为空来显示一些特定的div

标签： knockout.js knockout-2.0

【解决方案1】：

Knockout 为您提供 if 和 ifnot 绑定。您只需使用foreach 退后一点；它的内部仅针对每个元素，因此当没有内部时，就没有任何内部。

<div data-bind="if: pets().length > 0">These are the pets:</div>
<div data-bind="if: pets().length == 0">There aren't any pets. To add a pet...</div>
<div data-bind="foreach: pets">

社论：您的问题很重要，因为空列表是一个发表意见的机会，而不是显示blank slate。

【讨论】：

谢谢汤姆。这是一个很好的链接到blank slate。 foreach 绑定只是template 绑定的包装；内容和标签本身可以由模板处理程序任意更改。您可能还会注意到问题中使用 if 和 ifnot 的虚拟元素 --- 问题的乐观愿望是有一个解决方案，避免标签混乱，其中所表示的信息在语义上和逻辑上是离散的，不可分割的单位（恰好是 - 或有 - 一个列表）。干杯。
另一个例子是<div data-bind="visible: pets.length == 0">There are no items.</div>

【解决方案2】：

Knockout 3 扩展 Knockout Punches 提供了一个默认处理程序，可以像这样使用：

<span data-bind="text: name | default:'Nobody'"></span>

更多阅读：KO Punches Documentation

【讨论】：

【解决方案3】：

我知道你很久以前就问过了，但也许今天它可以帮助某人；如果使用 observable 数组或依赖 observable（如从列表中过滤结果）执行此操作，则上述解决方案将不起作用。

你可以使用这个方法来强制 KO 遍历这个 observable 并使用“with”查看它是否发生了变化。在该循环中，您应该检查 $data 长度，如果它是 0，则没有要循环的数据；）

<!--ko with: xyz -->
  <div class="nodata" data-bind="visible:$data.length==0">
     Sorry, no data
  </div>
<!--/ko-->

【讨论】：