ノックアウトテーブル/サブテーブルの展開/折りたたみボタンの切り替え

Question

ノックアウトとTypescriptを使用するテーブルがあります。テーブルの各レコードは、展開ボタンで展開できます。この展開ボタンをクリックすると、折りたたみボタンが切り替わります。私が抱えている問題は、テーブルに複数のレコードがある場合、この展開ボタンをクリックすると、テーブル内のすべてのレコードの折り畳みボタンが切り替わります。私がクリックしたものをトグルするだけの方法はありますか？あなたが各テーブルには、独自に拡張した状態を追跡したいと思う

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

Answer 1

HTML：ここでは、コードです。あなたのトグル変数は、テーブルに関してグローバルであるように見えます。したがって、すべての変数にグローバルに適用されています。

まず、それぞれの展開状態を追跡するために、各テーブルごとに独立したオブザーバブルを用意する必要があります。展開変数をSearchPrintedChecksModelからテーブルのモデルに移動します（CheckRunModel？）。次にToggleExpand関数でprintModel.expand（...）をdata.expand（...）に変更します。最後に、バインディングで "visible：$ parent.expand（）"を "visible：expand"に変更します。