Symfoware

Symfowareについての考察blog

Riot ボタンクリック 表示非表示 ループ(イベントハンドラー,show,hide,if,each)

Riotの最小構成で動くプログラムを調べました。
Riot 最小構成のサンプルプログラム

今回はボタンのクリックイベントを取得するプログラムを試してみます。


イベントハンドラ



こちらを参考にしています。
Riotカスタムタグ

テキストに文字を入力。
ボタンを押したらdivタグに同じ文字列を表示します。

・index.html


  1. <!doctype html>
  2. <html lang="ja">
  3.     
  4. <html>
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>Riot click</title>
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9. </head>
  10. <body>
  11.     <!-- ここにタグの内容を反映 -->
  12.     <my-tag></my-tag>
  13. </body>
  14. <!-- ここからRiotプログラム -->
  15. <!-- カスタムタグ -->
  16. <script type="riot/tag">
  17. <my-tag>
  18. <h3>ボタンクリックで値変更</h3>
  19. <div>{ description }</div>
  20. <div><input type="text" ref="input_text"></div>
  21. <div><input type="button" value="変更" onclick={ changeText }></div>
  22. changeText(event) {
  23.      this.description = this.refs.input_text.value
  24. }
  25. </my-tag>
  26. </script>
  27. <!-- マウント -->
  28. <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.3.2/riot%2Bcompiler.min.js"></script>
  29. <script>
  30. riot.mount('my-tag')
  31. </script>
  32.     
  33. </html>




htmlタグに対し、ref属性で名前をつけておくと、そのオブジェクトに
this.refs.[名前]
でアクセスできるようになります。
これは便利。

カスタムタグ中、scriptタグは省略できるので、htmlタグの直後にjavascriptの
関数を記載することができます。

初期状態

737_01.png


適当な文字列を入力して「変更」をクリックすると、divタグのある位置に
入力したのと同じ文字列が表示されました。

737_02.png





表示、非表示の条件分岐



特定タグの表示・非表示を切り替える方法を調べてみます。

http://riotjs.com/ja/guide/
こちらの「条件属性」を参考にしました。

ボタンクリックで表示・非表示を切り替えます。
show/hideを使用する方法とifを使用する方法の2パターンあります。


  1. <!doctype html>
  2. <html lang="ja">
  3.     
  4. <html>
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>Riot click</title>
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9. </head>
  10. <body>
  11.     <!-- ここにタグの内容を反映 -->
  12.     <my-tag></my-tag>
  13. </body>
  14. <!-- ここからRiotプログラム -->
  15. <!-- カスタムタグ -->
  16. <script type="riot/tag">
  17. <my-tag>
  18. <h3>ボタンクリックで表示変更</h3>
  19. <div show={ is_display }>show</div>
  20. <div hide={ is_display }>hide</div>
  21. <hr>
  22. <div if={ is_display }>ifでshow</div>
  23. <div if={ !is_display }>ifでhide</div>
  24. <div><input type="button" value="変更" onclick={ changeText }></div>
  25. this.is_display = true
  26. changeText(event) {
  27.      this.is_display = !this.is_display
  28. }
  29. </my-tag>
  30. </script>
  31. <!-- マウント -->
  32. <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.3.2/riot%2Bcompiler.min.js"></script>
  33. <script>
  34. riot.mount('my-tag')
  35. </script>
  36.     
  37. </html>




初期表示

737_03.png

ボタンクリック

737_04.png


show/hideとifで何が違うかというと、display:noneで非表示にするか、
タグごと削除されるかの差のようです。

737_05.png




ループ



配列をループして表示する方法。
eachでループしたいオブジェクトを指定します。


  1. <!doctype html>
  2. <html lang="ja">
  3.     
  4. <html>
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>Riot click</title>
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9. </head>
  10. <body>
  11.     <!-- ここにタグの内容を反映 -->
  12.     <my-tag></my-tag>
  13. </body>
  14. <!-- ここからRiotプログラム -->
  15. <!-- カスタムタグ -->
  16. <script type="riot/tag">
  17. <my-tag>
  18. <h3>ボタンクリックで項目追加</h3>
  19. <ul>
  20.      <li each={ items }>{ text }</li>
  21. </ul>
  22. <div><input type="button" value="追加" onclick={ add }></div>
  23. this.items = []
  24. add(event) {
  25.      this.items.push({text : 'テキスト追加'})
  26. }
  27. </my-tag>
  28. </script>
  29. <!-- マウント -->
  30. <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.3.2/riot%2Bcompiler.min.js"></script>
  31. <script>
  32. riot.mount('my-tag')
  33. </script>
  34.     
  35. </html>



初期表示

737_06.png


ボタンを押すと項目が増えていきます。

737_07.png


複数のタグで構成される要素をループで表示したいときはvirtualタグを使用します。


  1. <!doctype html>
  2. <html lang="ja">
  3.     
  4. <html>
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>Riot click</title>
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9. </head>
  10. <body>
  11.     <!-- ここにタグの内容を反映 -->
  12.     <my-tag></my-tag>
  13. </body>
  14. <!-- ここからRiotプログラム -->
  15. <!-- カスタムタグ -->
  16. <script type="riot/tag">
  17. <my-tag>
  18. <h3>ボタンクリックで項目追加</h3>
  19. <virtual each={ item in items }>
  20.      <div>項目:<span>{ item.text }</span></div>
  21. </virtual>
  22. <div><input type="button" value="追加" onclick={ add }></div>
  23. this.items = []
  24. add(event) {
  25.      this.items.push({text : 'テキスト追加'})
  26. }
  27. </my-tag>
  28. </script>
  29. <!-- マウント -->
  30. <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.3.2/riot%2Bcompiler.min.js"></script>
  31. <script>
  32. riot.mount('my-tag')
  33. </script>
  34.     
  35. </html>



関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2017/03/26(日) 18:32:35|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
次のページ