隐藏show table knockout打字稿

Question

我有一个包含2个不同搜索选项的页面，每个搜索选项都有自己的表格。一旦敲除可观察数组具有长度，每个表都被设置为可见。问题是我不希望两个表同时显示。

我想这样，如果一个表可观察数组有长度，那么另一个表是不可见的，反之亦然。我在尝试设置data-bind =＆＃34;可见的所有内容：...＆＃34;还没有工作，也没有将数组的长度设置为0.任何帮助将不胜感激。这是代码：

观点：

 <div data-bind="visible: !vendorChecks().length">
    <table class="details_table" id="CheckRunTable" data-bind="visible: checkRuns().length ">
    <thead>
        <tr>
            <th>Check Run ID
            </th>
            <th>Description
            </th>
            <th>Payment Type
            </th>
            <th>Original Amount
            </th>
            <th>Approved Amount
            </th>
            <th>Approve Status
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody class="highlight" data-bind=" foreach: checkRuns()">
        <tr>
            <td><span data-bind="text: $data.CheckRunID"></span></td>
            <td><span data-bind="text: Description"></span></td>
            <td><span data-bind="text: Globalize.formatPaymentType(PaymentType()) "></span></td>
            <td><span data-bind="text: FormatCurrency(OriginalAmount())"></span></td>
            <td><span data-bind="text: FormatCurrency(ApprovedAmount())"></span></td>
            <td><span data-bind="text: Globalize.formatCheckRunApproveStatus(CheckRunApprovalStatus())"></span></td>
            <td>
                <a href="#" data-bind="attr: {'id': 'show_' + $index()}">
                    <img src="../../Images/expand.gif" class="expand_button" alt="Show Checks" title="Show Checks" border="0" data-bind="click: PrintCheck.GetBankDrafts, visible: !$parent.expand(), click: PrintCheck.ToggleExpand">
                    <img src="../../Images/collapse.gif" class="collapse_button" alt="Show Checks" title="Show Checks" border="0" data-bind="visible: $parent.expand(), click: PrintCheck.ToggleExpand">
                </a>
            </td>
        </tr>
        <tr>
            <td colspan="6">
                <div class="highlight" style="display: none;" data-bind="attr: {'id': 'extra_' + $index()}">
                    <table id="BankDraftTable">
                        <thead style="color: blue;">
                            <tr>
                                <th>
                                    <label for="checkrun">Check ID </label>
                                </th>
                                <th>
                                    <label for="checkrun">Check Run ID </label>
                                </th>
                                <th>
                                    <label for="checkrun">Vendor </label>
                                </th>
                                <th>
                                    <label for="checkrun">Check Date </label>
                                </th>
                                <th>
                                    <label for="checkrun">Check Amount </label>
                                </th>
                                <th>
                                    <label for="checkrun">Approval Status </label>
                                </th>
                                <th data-bind="visible: $parent.isNotEFT()">
                                    <a href="#">
                                        <img src="../../Images/export-icon.png" title="Export AP-Link file" border="5px" class="exportChecks" data-bind="click: PrintCheck.ExportChecks,">
                                    </a>
                                </th>
                                <th>
                                    <a href="#">
                                        <img src="../../Images/print-icon.png" title="Print Checks" border="5px" data-bind="click: PrintCheck.PrintChecks" />
                                    </a>
                                </th>
                            </tr>
                        </thead>
                        <tbody class="nohighlight" data-bind="foreach: $parent.bankDrafts()">
                            <tr>
                                <td><span data-bind="text: CheckID"></span></td>
                                <td><span data-bind="text: CheckRunID"></span></td>
                                <td><span data-bind="text: VendorName"></span></td>
                                <td><span data-bind="text: CheckDate"></span></td>
                                <td><span data-bind="text: FormatCurrency(CheckAmount())"></span></td>
                                <td><span data-bind="text: Globalize.formatCheckRunApproveStatus(ApprovalStatusID())"></span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
</table>
</div>
<div data-bind="visible: !checkRuns().length">
    <table class="details_table" data-bind="visible: vendorChecks().length">
    <thead>
        <tr>
            <th>Check ID
            </th>
            <th>Check Date
            </th>
            <th>Vendor Name
            </th>
            <th>Check Amount
            </th>
            <th>Approve Status
            </th>
            <th>
                <input type="checkbox" data-bind="checked: selectAllChecks" title="Select all/none"/>
            </th>
        </tr>
    </thead>
    <tbody class="nohighlight" data-bind="foreach: $root.vendorChecks">
        <tr>
            <td><span data-bind="text: $data.CheckID"></span></td>
            <td><span data-bind="text: CheckDate"></span></td>
            <td><span data-bind="text: VendorName"></span></td>
            <td><span data-bind="text: FormatCurrency(CheckAmount())"></span></td>
            <td><span data-bind="text: Globalize.formatCheckRunApproveStatus(ApprovalStatusID())"></span></td>
            <td>
                <input type="checkbox" data-bind="checkedValue: $data, checked: $root.chosenChecks"/>
            </td>
        </tr>
    </tbody>
</table>
</div>

打字稿：

 class SearchPrintedChecksModel {
    public checkRuns = ko.observableArray<CheckRunModel>(null);
    public bankDrafts = ko.observableArray<BankDraftInfoModel>(null);
    public vendorChecks = ko.observableArray<BankDraftInfo>(null);
    public searchParameter = ko.observable<string>(searchParameter || null);
   }

  export function GetCheckRuns(): void {
    if (printModel.vendorChecks().length) {
        printModel.vendorChecks().length = 0;
    }
    PrintCheckServiceMethods.GetApprovedCheckRuns(printModel.searchParameter()).done(checkRuns => ko.mapping.fromJS(checkRuns, null, printModel.checkRuns));
}

 export function GetCheckRunsByVendor(data: SearchPrintedChecksModel): void               {
    if (printModel.checkRuns().length) {
        printModel.checkRuns().length = 0;
    }
    PrintCheckServiceMethods.GetCheckRunsByVendor(data.VendorID(), data.StartCheckNumber(), data.EndCheckNumber(), data.StartDate(), data.EndDate(), data.CheckAmount())
        .done(vendorChecks => ko.mapping.fromJS(vendorChecks, null, printModel.vendorChecks));
   }