当可观察数组为空时如何显示无数据? [英] How to display No Data when observable array is empty?

问题描述

我是 Knockout.js 的新手，我正在尝试将数据从 observable 数组显示到 table.我的问题是它生成两个 tbody 标签.但是，如果我将空检查逻辑移动到 foreach: 循环中，No Data 确实会出现.

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.

有没有更好的方法来使用表格来做到这一点?在这种情况下，我不喜欢使用 ul 或 ol.

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>

推荐答案

在执行此操作时，我们大量使用了虚拟元素.它们在此处概述 http://knockoutjs.com/documentation/if-binding.html#note_using_if_without_a_container_element

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

你的其余标记很好，但你可以像这样将你的第一个 tbody 包装在一个虚拟元素中:

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 在这里:http://jsfiddle.net/ZKWMh/

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

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