backbone.jsの実装について
前回記事でbackbone.js使うことになった経緯を書きました。
hiromitsu-daisuke.hatenablog.com
今回はbackbone.jsを使ってどんな動きを実装したかについて書きます。
前提・仕様
野球チームの対戦で例えます。
以下3チームがあるとします。
(問題あるといけないので一応実在チームとは違う書き方で)
- キョジン
- ハンシン
- チュウニチ
試合が以下のようにあるとします。
| 対戦チーム | 場所 |
|---|---|
| キョジン×ハンシン | 東京 |
| キョジン×ハンシン | 大阪 |
| キョジン×チュウニチ | 東京 |
| ハンシン×チュウニチ | 愛知 |
この表のデータを検索します。
検索項目として、対戦チームと場所をチェックボックスで複数選択できるように画面に表示します。
この時、関連するデータのチェックボックスは連動してONOFFする仕様とします。
例えば、キョジン×ハンシンのチェックボックスをONにしたら、東京、大阪をチェックONにします。
場所の方も同様に、東京をONにした場合はキョジン×ハンシン、キョジン×チュウニチをONにします。
この反対の操作を行った場合も同じ動作をさせます。
例えば、東京がONで大阪がOFFの場合に大阪をONにしたらキョジン×ハンシンをONにします。
結果
いきなり結果から。
というかこの記事書くので相当疲れちゃったので、今回は結果だけ。
解説編はまたの機会ということで。。
See the Pen backbone.js checkbox sync by HIROMITSU Daisuke (@daisuke718) on CodePen.
キョジン×ハンシンチェックボックスとか
東京チェックボックスとかをクリックしてもらうと
期待する動作が分かってもらえるかと思います。
以上です。
