knockout.js - 隐藏带有敲除数据绑定的 html 表

Question

我知道如果没有这样的数据，我们可以隐藏一个表：可见：Vehicles().length>0

<table data-bind="visible: Vehicles().length>0">
    <thead><tr><th>Brand</th><th>Model</th><th>Registration</th><th></th></tr></thead>
    <tbody data-bind="foreach: Vehicles">
        <tr data-bind="click: $root.goToVehicle">
            <td data-bind="text: Brand"></td>
            <td data-bind="text: Model"></td>
        </tr>     
    </tbody>
</table>

Vehicles 是一个可观察的对象。

现在我有另一个场景：

<table data-bind="with: chosenCategoryData">
    <thead><tr><th>Brand</th><th>Model</th><th>Registration</th><th></th></tr></thead>
    <tbody data-bind="foreach: Vehicles">
        <tr data-bind="click: $root.goToVehicle">
            <td data-bind="text: Brand"></td>
            <td data-bind="text: Model"></td>
        </tr>     
    </tbody>
</table>

如您所见，包含填充 html 表的数据的 Vehicles 对象包含在另一个名为 selectedCategoryData 的对象（可观察）中。

我尝试隐藏表格，visible: Vehicles().length>0但出现错误，可能是因为车辆不可观察。

我该如何进行？

Answer 1

IIRC，你不能在同with一个. 你可以把它包在另一个visibledata-bind<div>

<div data-bind="with: chosenCategoryData">
    <table data-bind="visible: Vehicles.length">...</table>
</div>

或使用虚拟语法：

<!-- ko with: chosenCategoryData -->
<table data-bind="visible: Vehicles.length">
<!-- /ko -->

看看这个jsfiddle。如果Vehicles()那是一个observableArray.