ko データリストの表示のオン・オフ

javascriptとかなら、domをとってきてstyleでdisplay:none;とかにするけど、knockout.jsだとvisibleバインディングで可能。

元になるデータを用意

これは、「self.dataObj = ko.observableArray()」ってな感じでok。
observable()でもいいけど次でループさせるからobservableArray()にしている。

同じデータ数の監視させるヤツを用意

元になるデータをfor文で回して「self.detail()[i] = ko.observable(false);」ってな感じで作成。

表示・非表示をしたいHTMLタグにvisibleバインディングに監視させるヤツを設置

例えば、tableで行をまるっと表示・非表示したいならtrタグに対して「visible: $root.detail()[$index()]」を設置。

「$index()」で何行目のデータかってのが取得できる。

クリックしたら、監視させるヤツにtrue/falseをいれる

クリックしたときに元のデータの何番目が選択されているのかを取得して監視させるヤツの対応するヤツを変更。

クリックした行のデータを「変数：obj」で受けて、元のデータから検索して、インデックス番号を取得する。「var target = self.dataObj.indexOf(obj);」ってな感じで。

クリックした行のデータと同じインデックス番号の「self.detail()」の値を以下のように変更する。

・クリックした行のデータと同じインデックス番号の「self.detail()」が「self.detail()[target]」になる。
・「self.detail()[target]」の値は「self.detail()[target]()」で取れる。
・「self.detail()[target]」の値がtrueだったらfalse、falseだったらtrueを入れる。
・trueだったらfalse、falseだったらtrueってのは、「!self.detail()[target]()」ってな感じ。
・対象の「self.detail()[target]」にセットしたいので「self.detail()[target](!self.detail()[target]())」とする。

▼サンプル
各データの詳細表示・非表示