为剔除表/子表切换展开/折叠按钮答案

【问题标题】：Toggling expand/collapse button for a knockout table/sub- table为剔除表/子表切换展开/折叠按钮
【发布时间】：2017-06-15 22:18:55
【问题描述】：

我有一张使用 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>

打字稿

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);
}

【问题讨论】：

标签： html typescript knockout.js

【解决方案1】：

您会希望每个表都跟踪其自己的展开状态。您的切换变量对于表格来说似乎是全局的，因此它会全局应用于所有表格。

首先，您必须为每个表设置一个单独的 observable，以跟踪它们各自的展开状态。将扩展变量从 SearchPrintedChecksModel 移动到表的模型 (CheckRunModel?)。然后在您的 ToggleExpand 函数中将 printModel.expand(...) 更改为 data.expand(...)。最后在您的绑定中将“可见：$parent.expand()”更改为“可见：扩展”。

【讨论】：