Question

请记住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);
  }
}

这对于简单的observable似乎工作得相当好，但它不适用于foreach绑定，但无论如何我认为上述链接中的extender建议可能更好，原因有几个 - 上面的代码会有一些警告。尽管如此，我把这个例子放在这里，因为它有点突出了另一种选择和思考的食物。

所有这些，我想知道提供默认值代替foreach内容可能有哪些选项。

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

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

然而，这并不是特别优雅 - 许多代码混乱。

Answer 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的机会。

Answer 2

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

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

更多阅读：KO Punches Documentation

Answer 3

我知道你很久以前就问过这个问题，但也许今天它可以帮助某人; 如果使用可观察数组或从属可观察数据（如列表中的过滤结果），上述解决方案将无效。

您可以使用此方法强制KO浏览此可观察对象，并使用“with”查看它是否已更改。在该循环内部，您应该检查$ data length，如果它是0，则没有数据要循环;）

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

当`foreach`为空时，敲除默认文本

3 个答案: