如何不显示任何数据，当观察到数组为空？ [英] How to display No Data when observable array is empty?

问题描述

我是新来Knockout.js，我试图从观察到的阵列数据显示到表。
我的问题是它会产生两个 TBODY 标记。但是，如果我移动空检查逻辑到的foreach：循环中，无数据并在所有showup

有没有更好的办法做到这一点使用表？我不喜欢用 UL 或醇在这种情况下。

 ＆LT;表＆gt;
    ＆LT;＆THEAD GT;
        ＆所述; TR＆GT;
            ＆LT;第i证＆LT; /第i
            ＆LT;第i LT地区; /第i个
            ＆LT;第i个地主＆LT; /第i
        ＆LT; / TR＆GT;
    ＆LT; / THEAD＆GT;
    ＆LT; TBODY数据绑定=的foreach：requestList＆GT;
        ＆所述; TR＆GT;
            ＆LT; TD＆GT;＆LT;跨度数据绑定=TEXT：许可证＆GT;＆LT; / SPAN＆GT;＆LT; / TD＆GT;
            ＆LT; TD＆GT;＆LT;跨度数据绑定=TEXT：区域＆GT;＆LT; / SPAN＆GT;＆LT; / TD＆GT;
            ＆LT; TD＆GT;＆LT;跨度数据绑定=TEXT：地主＆GT;＆LT; / SPAN＆GT;＆LT; / TD＆GT;
        ＆LT; / TR＆GT;
    ＆LT; / TBODY＆GT;
    ＆LT; TBODY数据绑定=如果：requestList（）长度=== 0＆GT;
        ＆所述; TR＆GT;
            ＆LT; TD合并单元格=3＆GT;无数据＆LT; / TD＆GT;
        ＆LT; / TR＆GT;
    ＆LT; / TBODY＆GT;
＆LT; /表＆gt;
 

解决方案

在这样做，我们做了很多利用虚拟元素组成。他们在这里概述<一href=\"http://knockoutjs.com/documentation/if-binding.html#note_using_if_without_a_container_element\">http://knockoutjs.com/documentation/if-binding.html#note_using_if_without_a_container_element

您的标记的其余部分是好的，但你可以换你的第一个TBODY在这样一个虚拟的元素：

 ＆LT;  - 如果阁！。requestList（）长度 - ＆GT;
    ＆LT; TBODY数据绑定=的foreach：requestList＆GT;
        ＆所述; TR＆GT;
            ＆LT; TD＆GT;＆LT;跨度数据绑定=TEXT：许可证＆GT;＆LT; / SPAN＆GT;＆LT; / TD＆GT;
            ＆LT; TD＆GT;＆LT;跨度数据绑定=TEXT：区域＆GT;＆LT; / SPAN＆GT;＆LT; / TD＆GT;
            ＆LT; TD＆GT;＆LT;跨度数据绑定=TEXT：地主＆GT;＆LT; / SPAN＆GT;＆LT; / TD＆GT;
            ＆LT; TD＆GT;＆LT;按键数据绑定=点击：$ parent.remove＆GT;删除＆LT; /按钮＆GT;＆LT; / TD＆GT;
        ＆LT; / TR＆GT;
    ＆LT; / TBODY＆GT;
＆LT;！ -  / KO  - ＆GT;
 

在这里的jsfiddle： http://jsfiddle.net/ZKWMh/

I'm new to Knockout.js and I'm trying to display data from observable array to a table. The problem I have is it generates two tbody tags. But if I move the empty check logic into the foreach: loop, the No Data does showup at all.

Is there a better way to do this using table? I don't like to use ul or ol in this case.

<table>
    <thead>
        <tr>
            <th>Permit</th>
            <th>Region</th>
            <th>Landowner</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: requestList">
        <tr>
            <td><span data-bind="text: permit"></span></td>
            <td><span data-bind="text: region"></span></td>
            <td><span data-bind="text: landowner"></span></td>
        </tr>
    </tbody>
    <tbody data-bind="if: requestList().length === 0">
        <tr>
            <td colspan="3">No Data</td>
        </tr>
    </tbody>
</table>

解决方案

When doing this we make a lot of use of virtual elements. They are outlined here http://knockoutjs.com/documentation/if-binding.html#note_using_if_without_a_container_element

The rest of your markup is fine, but you could wrap your first tbody in a virtual element like this:

<!-- ko if: requestList().length -->
    <tbody data-bind="foreach: requestList">
        <tr>
            <td><span data-bind="text: permit"></span></td>
            <td><span data-bind="text: region"></span></td>
            <td><span data-bind="text: landowner"></span></td>
            <td><button data-bind="click: $parent.remove">Remove</button></td>
        </tr>
    </tbody>
<!-- /ko -->

JSFiddle here: http://jsfiddle.net/ZKWMh/

这篇关于如何不显示任何数据，当观察到数组为空？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！