15

同様の質問がここで回答されていることを念頭に置いて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);
  }
}

これは単純なオブザーバブルではかなりうまく機能するようですが、バインディングでは機能しませんが、いずれにせよ、上記のリンクの提案はいくつかの理由でおそらく望ましいforeachと思います.上記のコードにはいくつかの注意事項があります. extenderそれにもかかわらず、私はこの例をここに入れました。

そうは言っても、foreachコンテンツの代わりにデフォルトを提供するためにどのようなオプションがあるか知りたい.

if1 つは、次のように単純な でラッパーを提供することです。

<!-- 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 に答える