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

Question

请记住,这里已经回答了类似的问题,我想知道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);
  }
}

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

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

一个是提供一个简单的包装器if,如下所示:

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

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

Answer 1

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

编辑:你的问题很重要,因为空名单是一个说些什么而不是显示空白名单的机会.

Answer 2

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

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

更多阅读:KO Punches文档