'foreach' boş olduğunda varsayılan metin yok

Question

similar questions have been answered here'un akılda tutulduğunu akılda tutarak, liste boş olduğunda bir Knockout data-bind='foreach: list' içinde varsayılan metin veya HTML ekranının nasıl görünebileceğini merak ediyorum. Bağlantı sağlanan sayfadaki

çözümler oldukça bu hizada görünmüyor ve her durumda bir özel böyle bağlayıcı ile bunu gerçekleştirmek için denemek için başka bir yol düşündüm:

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

Bu basit gözlenebilirler ile oldukça iyi çalışıyor gibi görünüyor, ancak foreach bağlayıcı ile çalışmaz, ancak her durumda yukarıdaki bağlantıdaki extender önerisinin muhtemelen birkaç nedenden dolayı tercih edileceğini düşünüyorum - yukarıdaki kodun bazı uyarıları olacaktır. Yine de, bu örneği burada attım çünkü bir şekilde bir alternatif ve düşünce için yiyecekleri vurgulamaktadır.

Bütün bunlar söylenirken, foreach içeriğinin yerine varsayılan olarak hangi seçenekleri sunabileceğini bilmek isterim.

biri bu gibi basit bir if bir sarmalayıcı sağlamaktır:

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

Ancak bu özellikle zarif değil - kod dağınıklığı bir sürü.

Answer 1

Knockout size if ve ifnot bağlamaları verir. Sadece foreach ile elemandan biraz geri adım atmanız gerekiyor; İç kısımları sadece her eleman için, yani hiç yokken, hiçbir içsel değildir.

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

Editoryal: Boş listeleri yerine blank slate gösteren şeyler söylemek için bir fırsat çünkü Sorunuz önemlidir.

Answer 2

uzatma Knockout Punches böyle bir şey kullanılabilecek bir varsayılan işleyicisi sağlar 3 Nakavt:

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

Daha okuma: Ben uzun zaman önce bunu sordunuz biliyorum KO Punches Documentation

Answer 3

, ama belki bugün birine yardım edebilir; Gözlemlenebilir bir diziyle veya gözle görülür şekilde gözlemlenebilir (bir listeden filtre sonuçları gibi) yaparsanız, yukarıdaki çözüm işe yaramaz.

Bu yöntemi kullanarak KO'nu gözlemlenebilir hale getirin ve "with" ile değiştirilip değiştirilmediğini görün.

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