riot.js(v3) 要素の表示・非表示の切り替えで手を抜く方法
通常、要素の表示状態を切り替えるには、その要素ごとに
・状態を表すプロパティ
・クリックされたときのハンドラ関数
を定義しなければなりません。
例）3つのコンテンツで表示・非表示を切り替える
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!-- タグ --> <my-tag> <div> <div onclick="{toggleContent1}">コンテンツ1を見る</div> <div if={isShowContent1}>コンテンツ1の内容 コンテンツ1の内容 コンテンツ1の内容<div> </div> <div> <div onclick="{toggleContent2}">コンテンツ2を見る</div> <div if={isShowContent2}>コンテンツ2の内容 コンテンツ2の内容 コンテンツ2の内容<div> </div> <div> <div onclick="{toggleContent3}">コンテンツ3を見る</div> <div if={isShowContent3}>コンテンツ3の内容 コンテンツ3の内容 コンテンツ3の内容<div> </div> <script> let tag = this; tag.isShowContent1 = false; tag.toggleContent1 = function(){ tag.isShowContent1 = !tag.isShowContent1; //tag.update(); } tag.isShowContent2 = false; tag.toggleContent2 = function(){ tag.isShowContent2 = !tag.isShowContent2; //tag.update(); } tag.isShowContent3 = false; tag.toggleContent3 = function(){ tag.isShowContent3 = !tag.isShowContent3; //tag.update(); } </script> </my-tag> |
※tag.update()についてはイベントハンドラが自動でupdate()を行わないようにしている(riot.settings.autoUpdate = false;)ため、設定を変えていなければ不要。
もっと短く書く方法もあると思いますが、基本的な流れはこのようになるかと思います。
そこで一つユーティリティ関数を作成し、冗長な記載をしなくてすむようにする方法を紹介したいと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!-- 適当な所にグローバル関数を作る --> <script> window.myToggle = function(name){ return function(){ this[name] = !this[name]; //this.update(); } }; </script> <!-- タグ --> <my-tag> <div> <div onclick="{myToggle('isShowContent1')}">コンテンツ1を見る</div> <div if={isShowContent1}>コンテンツ1の内容 コンテンツ1の内容 コンテンツ1の内容<div> </div> <div> <div onclick="{myToggle('isShowContent2')}">コンテンツ2を見る</div> <div if={isShowContent2}>コンテンツ2の内容 コンテンツ2の内容 コンテンツ2の内容<div> </div> <div> <div onclick="{myToggle('isShowContent3')}">コンテンツ3を見る</div> <div if={isShowContent3}>コンテンツ3の内容 コンテンツ3の内容 コンテンツ3の内容<div> </div> </my-tag> |
myToggleという関数を使用することで、タグにプロパティや関数を定義しなくて良いのでスッキリと書くことができます。
