knockout.js изменить видимый статус на основании, если массив пуст или нет

Question

Я хочу иметь представление таблицы только в том случае, если в массиве есть элементы. Я упростил свои потребности в этом примере 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> 

В принципе у меня есть веб-приложение, где линии могут быть удалены из таблицы. Если array.length == 0, я хочу скрыть всю таблицу.

Answer 1

Вы можете сделать это несколькими способами. В приведенной ниже скрипте используются контейнеры без контейнера, чтобы скрыть всю таблицу, если в массиве строк нет записей.

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

Другое решение, небольшое изменение в исходной попытки:

<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

Считается плохой практикой, чтобы добавить логику в шаблон HTML. я предлагаю такое решение:

<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

, если вы хотите, чтобы показать сообщение или изображение, как этот jsfiddle например

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

, если вы хотите, чтобы скрыть сообщение, когда строки таблицы Данные успешно

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