15

考虑到类似问题已在此处得到解答，我想知道data-bind='foreach: list'当列表为空时如何在 Knockout 中显示默认文本或 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内容。

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

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

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

4

3 回答 3

32

淘汰赛给你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">

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

于 2013-05-31T21:08:42.077 回答
5

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

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

更多阅读：KO 冲床文档

于 2013-10-29T01:31:28.903 回答
2

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

您可以使用此方法强制 KO 遍历此 observable，并使用“with”查看它是否已更改。在该循环中，您应该检查 $data 长度，如果它是 0，则没有要循环的数据；）

<!--ko with: xyz -->
  <div class="nodata" data-bind="visible:$data.length==0">
     Sorry, no data
  </div>
<!--/ko-->
于 2016-09-27T21:50:55.887 回答