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>