Knockout Standardtext, wenn `foreach` leer ist

Question

Bedenkt man, dass similar questions have been answered here, ich frage mich, wie man Standardtext oder HTML-Anzeige in einem Knockout data-bind='foreach: list' immer wenn die Liste leer ist.

Die Lösungen auf der verlinkten Seite scheinen nicht ganz mit diesem Line-Up, und in jedem Fall dachte ich an einem anderen Weg, dies zu versuchen, zu erreichen mit einem benutzerdefinierten wie dieser Bindung:

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

Dieses scheint mit einfachen Observablen recht gut zu funktionieren, aber es funktioniert nicht mit der foreach Bindung, obwohl ich in jedem Fall denke, dass der extender Vorschlag in der obigen Verbindung wahrscheinlich aus einigen Gründen vorzuziehen ist - der obige Code hätte eine Reihe von Vorbehalten. Nichtsdestotrotz habe ich dieses Beispiel hier hinein geworfen, weil es eine Alternative und Denkanstöße etwas hervorhebt.

Alles was gesagt wird, würde ich gerne wissen, welche Möglichkeiten gibt es für die Bereitstellung eines Standards anstelle von foreach Inhalt.

One ist ein Wrapper in einem einfachen if zu bieten, wie folgt aus:

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

Dies ist jedoch nicht besonders elegant - viel Code Krempel.

Answer 1

Knockout gibt Ihnen if und ifnot Bindungen. Sie müssen nur ein wenig von dem Element mit foreach zurücktreten; Sein Inneres ist nur für jedes Element, also, wenn es keine gibt, gibt es keine Innenseiten.

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

Editorial: Ihre Frage ist wichtig, weil leere Listen eine Gelegenheit gibt, etwas zu sagen, anstatt eine blank slate zu zeigen.

Answer 2

Der Knockout 3 Erweiterung Knockout Punches einen Standard-Handler bereitstellt, das so etwas wie dies verwendet werden kann:

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

More reading: KO Punches Documentation

Answer 3

Ich weiß, dass Sie es schon vor langer Zeit, gefragt haben, aber vielleicht ist es heute kann jemandem helfen; Wenn Sie dies mit einem beobachtbaren Array oder abhängigen beobachtbaren tun (wie Filterergebnisse aus einer Liste), wird die obige Lösung nicht funktionieren.

Sie können diese Methode verwenden, um KO zu zwingen, diese Observable zu durchlaufen und zu sehen, ob es sich geändert hat, indem Sie "mit" verwenden. Innerhalb dieser Schleife, sollten Sie $ Datenlänge zu überprüfen, wenn es 0 ist, gibt es keine Daten Schleife auf;)

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