配列に項目がある場合にのみテーブルを表示できるようにしたい。私は私のニーズをこれに簡略化しました 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>
基本的に、テーブルから行を削除できるWebアプリがあります。 array.length == 0
、テーブル全体を非表示にしたい。
いくつかの方法でこれを行うことができます。以下のフィドルは、lines配列にエントリがない場合に、コンテナなしのバインディングを使用してテーブル全体を非表示にします。
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 -->
別の解決策、元の試みのわずかなバリエーション:
<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>
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>
このようなメッセージや画像を表示したい場合 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>