Question

我有一个使用Knockout和Typescript的表。桌面上的每条记录都可以通过展开按钮进行扩展。单击此展开按钮可切换折叠按钮。我遇到的问题是，当表中有超过1条记录时，单击此展开按钮可切换表中所有记录的折叠按钮。无论如何只要切换我点击的那个？这是代码：

HTML

<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>

The Typescript

class SearchPrintedChecksModel {
    public expand = ko.observable(false);
    public checkRuns = ko.observableArray<CheckRunModel>(null);
 }

  $(document).ready(() => {
    ko.applyBindings(printModel);
});


var printModel = new SearchPrintedChecksModel();

export function ToggleExpand(data: CheckRunModel): void {
    printModel.expand(!printModel.expand());
    GetBankDrafts(data);
}

Answer 1

您希望每个表都能跟踪自己的扩展状态。您的切换变量在表格方面看起来是全局的，因此它会全局应用于所有表格。

首先，您必须为每个表都有一个单独的observable来跟踪它们各自的扩展状态。将展开变量从SearchPrintedChecksModel移动到表的模型（CheckRunModel？）。然后在您的ToggleExpand函数中将printModel.expand（...）更改为data.expand（...）。最后在你的绑定更改＆＃34;可见：$ parent.expand（）＆＃34;只是＆＃34;可见：展开＆＃34;。

切换挖掘表/子表的展开/折叠按钮

1 个答案: