Knockout.js 当“foreach”为空时删除默认文本

考虑到这一点，我想知道当列表为空时，如何在敲除

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);
  }
}

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

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

这似乎对简单的可观察对象很有效，但对

foreach

绑定不起作用，尽管在任何情况下，我认为上面链接中的

extender

建议可能更可取，因为有几个原因——上面的代码会有一些警告。尽管如此，我还是把这个例子放在这里，因为它在某种程度上突出了另一种选择，值得思考

尽管如此，我想知道有哪些选项可以提供默认值来代替

foreach

内容

一种是在简单的

if

中提供包装，如下所示：

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);
  }
}

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

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

//弗雷奇
//默认文本

---

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

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

这些是宠物：
没有宠物。要添加宠物。。。

社论：你的问题很重要，因为空列表是一个说话的机会，而不是显示一个符号。

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

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);
  }
}

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

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

---

更多阅读：

我知道你很久以前就问过了， 但也许今天它可以帮助某人； 如果使用可观察数组或相关可观察数组（如列表中的筛选结果），上述解决方案将不起作用

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

对不起，没有数据

您可以根据列表是否为空来显示某些div。谢谢Tom。这是一个伟大的链接到空白板岩。

foreach

绑定只是

模板

绑定的包装器；模板处理程序可以任意更改内容和标记本身。您可能还注意到问题中的虚拟元素使用了

if

和

ifnot

——问题的乐观愿望是找到一个解决方案，避免标记的混乱，其中所表示的信息在语义和逻辑上是一个离散的、不可分割的单元（碰巧是-或有-个列表）。干杯。另一个例子可能是

没有项目。