Niedopuszczalny domyślny tekst, gdy "foreach" jest pusty

Question

Pamiętając o tym, że similar questions have been answered here, zastanawiałem się, jak można mieć domyślny tekst lub wyświetlacz HTML wewnątrz nokautu data-bind='foreach: list', gdy lista jest pusta.

Rozwiązania na połączonej stronie nie dość wydaje się w jednej linii z tego, a w każdym razie myślałem o innym sposobem, aby spróbować osiągnąć z niestandardowego wiązania tak:

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

ten wydaje się działać dość dobrze z prostymi obserwatorami, ale nie działa z wiązaniem foreach, ale w każdym razie myślę, że sugestia extender w powyższym linku jest prawdopodobnie lepsza z kilku powodów - powyższy kod miałby wiele zastrzeżeń. Niemniej jednak wrzuciłem tutaj ten przykład, ponieważ w pewnym stopniu podkreśla on alternatywę i pożywienie do przemyśleń.

Wszystko, co jest powiedziane, chciałbym wiedzieć, jakie mogą być opcje dostarczania wartości domyślnej zamiast zawartości w postaci foreach.

Jedno jest dostarczenie opakowania w prosty if, tak:

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

Jednak to nie jest szczególnie elegancki - partie kodu bałaganu.

Answer 1

Knockout zapewnia wiązania if i ifnot. Musisz tylko cofnąć się nieco od elementu za pomocą foreach; Jej wnętrza są tylko dla każdego elementu, więc gdy ich nie ma, nie ma w nich żadnych wnętrz.

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

redakcyjnych: Twoje pytanie jest ważne, ponieważ puste listy są okazją do powiedzenia coś zamiast wykazujące blank slate.

Answer 2

nokaut 3 rozszerzenie Knockout Punches zapewnia obsługi domyślne, które mogą być używane tak:

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

Więcej czytanie: KO Punches Documentation

Answer 3

Wiem, że poprosił go dawno temu, ale może dziś może komuś pomóc; Jeśli zrobisz to z obserwowalną tablicą lub zależnym obserwowalnym (jak wyniki filtra z listy), powyższe rozwiązanie nie będzie działać.

Możesz użyć tej metody, aby zmusić KO do przejścia przez to obserwowalne i sprawdzić, czy zmieniło się za pomocą "z". Wewnątrz tej pętli, należy sprawdzić $ długość danych, jeśli jest to 0, nie ma danych do pętli na;)

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