knockout.js - `foreach` 为空时 knockout 默认文本

Question

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

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

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绑定(bind)，但无论如何我认为 extender出于几个原因，上面链接中的建议可能更可取——上面的代码有很多警告。尽管如此，我还是把这个例子放在这里，因为它有点突出了另一种选择和值得深思的地方。

说了这么多，我想知道有哪些选项可以提供默认值来代替 foreach。内容。

一种是在一个简单的 if 中提供一个包装器。 ， 像这样:

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

然而，这并不是特别优雅——大量的代码困惑。

Answer 1

knockout 给你if和 ifnot绑定(bind)。您只需使用 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。 .