knockout.js, dizinin boş olup olmadığına bağlı olarak görünür durumu değiştir

Question

Yalnızca bir dizideki öğeler varsa, bir tablo gösterimini kullanmak istiyorum. Bu jsfiddle örneğine gereksinimlerimi basitleştirdim.

JS:

var view_model = { 
    lines: ko.observableArray([ 
     { 
     content: 'one'}, 
    { 
     content: 'two'}, 
    { 
     content: 'three'}, 
    { 
     content: 'four'}, 
     ]), 
    remove: function(data) { 
     view_model.lines.remove(data); 
    } 
}; 

ko.applyBindings(view_model); 

HTML:

<span data-bind="visible:lines">Lines Exist</span> 
<ul data-bind='foreach:lines'> 
    <li> 
     <button data-bind="click:$parent.remove"> 
      Remove 
     </button> 
     <span data-bind="text:content"></span> 
    </li> 
</ul> 

Temelde satırları tablodan çıkarılabilir bir web uygulaması var. array.length == 0 ise, tüm tabloyu gizlemek istiyorum.

Answer 1

Bunu çeşitli yollarla yapabilirsiniz. Aşağıdaki küme satır dizisi girişleri yoksa tüm tabloyu gizlemek için kapsayıcı bağlamaları kullanır.

http://jsfiddle.net/johnpapa/WLapt/4/

<span data-bind="visible:lines">Lines Exist</span> 
<!-- ko if: lines().length > 0--> 
<p>Here is my table</p> 
<ul data-bind='foreach:lines'> 
    <li> 
     <button data-bind="click:$parent.remove"> 
      Remove 
     </button> 
     <span data-bind="text:content"></span> 
    </li> 
</ul> 
<!-- /ko -->​ 

Answer 2

orijinal denemede Başka bir çözüm, hafif varyasyon:

O html şablonuna mantığı eklemek için kötü uygulama olarak kabul edilir

<div data-bind="visible:lines().length"> 
    <span>Lines Exist</span> 
    <p>Here is my table</p> 
    <ul data-bind='foreach:lines'> 
     <li> 
      <button data-bind="click:$parent.remove"> 
       Remove 
      </button> 
      <span data-bind="text:content"></span> 
     </li> 
    </ul> 
</div> 

Answer 3

. Bu çözüm önermek:

<div data-bind="with: lines">  
    <span data-bind="if: length">Lines Exist</span> 
    <ul data-bind='foreach:$data'> 
     <li> 
      <button data-bind="click:$parent.remove"> 
       Remove 
      </button> 
      <span data-bind="text:content"></span> 
     </li> 
    </ul> 
</div> 

Answer 4

bu jsfiddle örnekteki gibi ileti veya resim göstermek istiyorum

<div data-bind="visible:lines().length"> 
    You will see this message only when "lines" holds a true value. 
    <img src=""/> 
</div> 

tablo çizgileri veriler başarıyla

<div data-bind="visible: !lines().length"> 
    You will see this message only when "lines" holds a false value. 
    <img src=""/> 
</div>