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

2012/11/20

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

やり方はいくつもあると思うけど…

・元になるデータを用意。
・同じデータ数の監視させるヤツを用意。
・表示・非表示をしたいHTMLタグにvisibleバインディングに監視させるヤツを設置
・クリックしたら、監視させるヤツにtrue/falseをいれる

元になるデータを用意

これは、「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]())」とする。

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

新着(ニュース関連以外)

2018-07-26
年賀状で「新春」とか書くけど・・・何故なんだろうと8月を目前にした今、疑問に思った。
2018-05-16
PHPで画像のヘッダ情報(?)の「Orientation」を元に画像回転させたい。
2018-03-05
Android Studioをインストール。エミュレータを軽くするトコまで終わらせたかったけど、挫折した。
2018-02-23
プッシュ通知について調べてた時にでてきたServiceWorker。そのServiceWorkerについてのメモ。
2017-12-13
jqueryで取得したDOM要素をオブジェクトじゃなくて、配列で受け取りたい