`foreach`が空のときノックアウトのデフォルトのテキスト

Question

similar questions have been answered hereということを念頭に置いて、リストが空のときにノックアウト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バインディングでは機能しませんが、いずれの場合でも上記のリンクのアドバイスがおそらくいくつかの理由で好ましいと思われます。上記のコードにはいくつかの注意点があります。それにもかかわらず、私はここにこの事例を投げかけました。なぜなら、それは思考のための選択肢と食料を幾分強調しているからです。

これまでのところ、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"> 

社説：空のリストではなくblank slateを示すの何かを言うための機会ですので、ご質問は重要です。

Answer 2

拡張Knockout Punchesはこのようなものを使用することができ、デフォルトのハンドラを提供3ノックアウト：

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

もっと読み：私はあなたがずっと前にそれを求めている知っているKO Punches Documentation

Answer 3

、 多分、今日それを誰かを助けることができます。 観測可能な配列や依存性のある観測値（リストからのフィルタ結果など）で行うと、上記の解決策は機能しません。

この方法を使用して、KOにこの観測値を強制的に渡し、 "with"を使用して変更されているかどうかを確認できます。

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