Question

我正在使用带有两个标签按钮的淘汰赛。我的第一个问题是，我只想在表格中有数据时启用标签按钮。这是我的整个代码。

<ul class="nav nav-tabs" nav-justified role="tablist">
            <li id="itemo" class="active"><a  href="#loanInvoice" role="tab"  data-toggle="tab">my loan invoices</a></li>
            <li id="itemr" ><a data-bind="enable: invoicedatasintable().length > 0" href="#investmentInvoice" role="tab"  data-toggle="tab">my investment invoices</a></li>
        </ul>
        <div class="tabBorder">
          <div id="tabs" class="tab-content">
            <div class="tab-pane active" id="loanInvoice">
              <div class="table-responsive">
            <table class="table table-striped table-bordered table-condensed">
                <thead>
                    <tr>
                        <th class="text-center"><?php echo lang("invoice_table_invoiced"); ?></th>
                        <th class="text-center"><?php echo lang("invoice_table_Paid"); ?></th>
                        <th class="text-center"><?php echo lang("invoice_table_Currency"); ?></th>
                        <th class="text-center"><?php echo lang("invoice_table_rf"); ?></th>
                        <th class="text-center"><?php echo lang("myinvoice_table_type"); ?></th>
                        <th class="text-center"><?php echo lang("invoice_table_status"); ?></th>
                        <th class="text-center"><?php echo lang("invoice_table_pay"); ?></th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: invoicedatasintable">
                    <tr data-bind="if : $data.type == 2 ">
                        <td class="text-center"><span data-bind="text: $data.invoiced_total"></span></td>
                        <td class="text-center"><span data-bind="text: $data.paid_total "></span></td>
                        <td class="text-center"><span data-bind="text: $data.Abbreviation"></span></td>
                        <td class="text-center"><a href="#" data-bind="click: $root.getSelectedInvoice"><span data-bind="text: $data.rf_reference"></span></a></td>
                        <!-- <td><span data-bind="text: $data.rf_reference"></span></td> -->
                        <td class="text-center"><span data-bind="text: $data.type_txt"></span></td>
                        <td class="text-center"><span data-bind="text: $data.status_description"></span></td>
                        <td class="text-center">
                        <a href="#" data-bind="if: parseFloat($data.invoiced_total()) > parseFloat($data.paid_total()), click: $root.getRepaymentInvoice"><?php echo lang("invoice_table_pay1"); ?></a>
                        <span data-bind="ifnot: parseFloat($data.invoiced_total()) > parseFloat($data.paid_total())"><?php echo lang("invoice_table_pay1"); ?></span>  
                    </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- table-responsive -->
        <div class="pager" data-bind="template:{ name: 'tpl-pager', data: Pagerinvoicedatas }"></div>

            </div>
            <!-- transhistory -->
            <div class="tab-pane" id="investmentInvoice">
              <div class="table-responsive" >
                <table class="table table-striped table-bordered table-condensed">
                 <thead>
                    <tr>
                        <th class="text-center"><?php echo lang("invoice_table_invoiced"); ?></th>
                        <th class="text-center"><?php echo lang("invoice_table_Paid"); ?></th>
                        <th class="text-center"><?php echo lang("invoice_table_Currency"); ?></th>
                        <th class="text-center"><?php echo lang("invoice_table_rf"); ?></th>
                        <th class="text-center"><?php echo lang("myinvoice_table_type"); ?></th>
                        <th class="text-center"><?php echo lang("invoice_table_status"); ?></th>
                        <th class="text-center"><?php echo lang("invoice_table_pay"); ?></th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: invoicedatasintable">
                    <tr data-bind="if : $data.type == 1">
                        <td class="text-center"><span data-bind="text: $data.invoiced_total"></span></td>
                        <td class="text-center"><span data-bind="text: $data.paid_total "></span></td>
                        <td class="text-center"><span data-bind="text: $data.Abbreviation"></span></td>
                        <td class="text-center"><a href="#" data-bind="click: $root.getSelectedInvoice"><span data-bind="text: $data.rf_reference"></span></a></td>
                        <!-- <td><span data-bind="text: $data.rf_reference"></span></td> -->
                        <td class="text-center"><span data-bind="text: $data.type_txt"></span></td>
                        <td class="text-center"><span data-bind="text: $data.status_description"></span></td>
                        <td class="text-center">
                        <a href="#" data-bind="if: parseFloat($data.invoiced_total()) > parseFloat($data.paid_total()), click: $root.getRepaymentInvoice"><?php echo lang("invoice_table_pay1"); ?></a>
                        <span data-bind="ifnot: parseFloat($data.invoiced_total()) > parseFloat($data.paid_total())"><?php echo lang("invoice_table_pay1"); ?></span>  
                    </td>
                    </tr>
                </tbody>
                </table>
              </div>
                 <!-- table-responsive -->
        <div class="pager" data-bind="template:{ name: 'tpl-pager', data: Pagerinvoicedatas }"></div>
            </div>

我尝试将启用放在不同的地方，因为它无法在任何地方工作，我只是把它放在第一秒<a>的{{1}}上，我还需要在另一个标签上使用相同的启用按钮，因此它会检查填充表的哪个选项卡可以单击该表。第二个问题，tr中的if语句，对于data.type == 2，它显示了一个完整的空表，当我使用pager转到第二页时，我看到data.type 2，这意味着很可能是它的显示data.type == 1但它隐藏起来我猜不确定。只是为了展示这里是一张照片。因此，当我点击第1页时，它没有显示任何内容，但它是空的，所以想知道为什么数据会转到第二页。

Answer 1

作为一个最小的例子，我写了下面的代码片段。数组是空的，并且第二个选项卡被禁用，因为当您单击它时锚点不执行任何操作。它仍然在悬停时突出显示，因为这是一个Bootstrap行为。如果您在Search f2 = new Search(); f2.result = <<search result variable>> f2.Show(); Search f2 = new Search(<<search result variable>>); f2.Show();中放置了一些数据，则该标签变为可点击。

问题是，您正在使用Bootstrap小部件，并且您没有绑定它们。 Bootstrap不是为了处理Knockout操纵DOM的方式（反之亦然）。您需要自定义绑定处理程序。有一个Knockout-Bootstrap library提供了很好的一组，但你可能仍然需要写一些自己的。

invoicedatasintable

vm = {
  invoicedatasintable: ko.observableArray([]),
  Pagerinvoicedatas: []
};

ko.applyBindings(vm);

表和导航使用knockout js enable和if语句

1 个答案: