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

您可以通过多种方式做到这一点。如果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 -->​

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>