knockout.js cambia lo stato visibile in base a se l'array è vuoto o no

Question

Voglio essere in grado di visualizzare una tabella solo se ci sono elementi in una matrice. Ho semplificato le mie esigenze per questo esempio di jsfiddle.

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> 

Fondamentalmente ho una web app in cui le linee possono essere rimossi dalla tabella. Se array.length == 0, voglio nascondere l'intera tabella.

Answer 1

È possibile farlo in diversi modi. Il violino in basso usa i collegamenti senza contenitore per nascondere l'intera tabella se l'array di linee non ha voci.

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

Un'altra soluzione, leggera variazione sul tentativo originale:

<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

E 'considerato una cattiva pratica di aggiungere la logica per il modello HTML. Suggerisco questa soluzione:

<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

se si desidera visualizzare il messaggio o immagine come questo jsfiddle esempio

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

se si desidera nascondere il messaggio quando le linee della tabella dati è apparso con successo

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