Riot.js 4 + Bootstrap 4のモーダルダイアログをriot.tagで定義

jQueryでボタンクリックを取得し、riot.tagにデータを設定してみました。
Riot.js 4 + jQuery ボタンクリックをjQueryで取得し、Riotタグに値を渡す

jQuery同様、Bootstrapもよく使用されるライブラリだと思います。
Bootstrapのダイアログをriot.tagで定義。
表示するデータをjQueryから設定できるか試してみます。


jQuery + Bootstrapでのサンプル



まず、jQuery + Bootstrapのみのサンプルです。
モーダル画面で値を更新させる際、初期値を与えた後表示させたいようなパターンはよくあるかと思います。

・index.html


  1. <html lang="ja">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>jquery sample</title>
  5.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  6. </head>
  7. <body>
  8.     <div><input type="button" value="ダイアログ表示" id="show"></div>
  9.     <!-- ダイアログ -->
  10.     <div class="modal" id="example" tabindex="-1" role="dialog">
  11.         <div class="modal-dialog" role="document">
  12.             <div class="modal-content">
  13.             <div class="modal-header">
  14.                 <h5 class="modal-title" id="title">(タイトル)</h5>
  15.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  16.                 <span aria-hidden="true">×</span>
  17.                 </button>
  18.             </div>
  19.             <div class="modal-body">
  20.                 <p id="message">(メッセージ)</p>
  21.             </div>
  22.             <div class="modal-footer">
  23.                 <button type="button" class="btn btn-primary">Save changes</button>
  24.                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  25.             </div>
  26.             </div>
  27.         </div>
  28.     </div>
  29. <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  30. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  31. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  32. <script>
  33. $(function() {
  34.     // jQueryでボタンクリックを取得
  35.     $('#show').on('click', function() {
  36.         // 表示する前にタイトルとメッセージを設定
  37.         $('#title').html('ダイアログタイトル')
  38.         $('#message').html('メッセージ')
  39.         $('#example').modal('show')
  40.     })
  41. })
  42. </script>
  43. </body>




動作は単純にボタンを押したらモーダルダイアログが表示されるだけです。

989_01.png

989_02.png

表示前に書き換える箇所が増えると面倒なので、ダイアログの定義部分を
まるごとriot.tagに変更したい。



Riot.js



ダイアログ部分をRiot.jsのタグで宣言します。

・index.html


  1. <html lang="ja">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>riot sample</title>
  5.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  6. </head>
  7. <body>
  8.     <div><input type="button" value="ダイアログ表示" id="show"></div>
  9.     <!-- タグの表示位置 -->
  10.     <my-dialog />
  11.     <!-- タグの定義ファイルを指定 -->
  12.     <script src="my-dialog.riot" type="riot"></script>
  13. <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  14. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  15. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  16. <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/4.1.1/riot+compiler.min.js"></script>
  17. <script>
  18. (async function main() {
  19.     await riot.compile()
  20.     const mydialog = riot.mount('my-dialog')
  21.     // jQueryでボタンクリックを取得
  22.     $('#show').on('click', function() {
  23.         // 表示する前にタイトルとメッセージを設定
  24.         mydialog[0].update({title:'Riotダイアログタイトル', message:'Riotメッセージ'})
  25.         $('#example').modal('show')
  26.     })
  27. }())
  28. </script>
  29. </body>




・my-dialog.riot


  1. <my-dialog>
  2.     <!-- ダイアログ -->
  3.     <div class="modal" id="example" tabindex="-1" role="dialog">
  4.         <div class="modal-dialog" role="document">
  5.             <div class="modal-content">
  6.             <div class="modal-header">
  7.                 <h5 class="modal-title">{ state.title }</h5>
  8.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  9.                 <span aria-hidden="true">×</span>
  10.                 </button>
  11.             </div>
  12.             <div class="modal-body">
  13.                 <p>{ state.message }</p>
  14.             </div>
  15.             <div class="modal-footer">
  16.                 <button type="button" class="btn btn-primary">Save changes</button>
  17.                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  18.             </div>
  19.             </div>
  20.         </div>
  21.     </div>
  22. </my-dialog>




動作はjQuery版と変わりません。

989_03.png

989_04.png

これで随分便利になりました。



show_modal



データの設定とダイアログ表示部分をriot.tag部分に移動することで、もう少しスッキリできそうです。

my-dialog.riot側にデータ設定&モーダル表示を行うメソッドを定義。
jQueryからは作成したメソッドを呼び出して、データの設定とモーダル表示を行ってみます。

・index.html


  1. <html lang="ja">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>riot sample</title>
  5.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  6. </head>
  7. <body>
  8.     <div><input type="button" value="ダイアログ表示" id="show"></div>
  9.     <!-- タグの表示位置 -->
  10.     <my-dialog />
  11.     <!-- タグの定義ファイルを指定 -->
  12.     <script src="my-dialog.riot" type="riot"></script>
  13. <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  14. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  15. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  16. <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/4.1.1/riot+compiler.min.js"></script>
  17. <script>
  18. (async function main() {
  19.     await riot.compile()
  20.     const mydialog = riot.mount('my-dialog')
  21.     // jQueryでボタンクリックを取得
  22.     $('#show').on('click', function() {
  23.         // 表示する前にタイトルとメッセージを設定
  24.         //mydialog[0].update({title:'Riotダイアログタイトル', message:'Riotメッセージ'})
  25.         //$('#example').modal('show')
  26.         mydialog[0].show_modal({title:'ダイアログタイトル', message:'メッセージ'})
  27.     })
  28. }())
  29. </script>
  30. </body>




・my-dialog.riot


  1. <my-dialog>
  2.     <!-- ダイアログ -->
  3.     <div class="modal" id="example" tabindex="-1" role="dialog">
  4.         <div class="modal-dialog" role="document">
  5.             <div class="modal-content">
  6.             <div class="modal-header">
  7.                 <h5 class="modal-title">{ state.title }</h5>
  8.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  9.                 <span aria-hidden="true">×</span>
  10.                 </button>
  11.             </div>
  12.             <div class="modal-body">
  13.                 <p>{ state.message }</p>
  14.             </div>
  15.             <div class="modal-footer">
  16.                 <button type="button" class="btn btn-primary">Save changes</button>
  17.                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  18.             </div>
  19.             </div>
  20.         </div>
  21.     </div>
  22.     <script>
  23.     export default {
  24.         show_modal(data) {
  25.             this.update(data)
  26.             $('#example').modal('show')
  27.         }
  28.     }
  29.     </script>
  30. </my-dialog>




これでupdateとshowを別々に呼ばなくて良くなりました。

関連記事

コメント

非公開コメント

プロフィール

Author:symfo
blog形式だと探しにくいので、まとめサイト作成中です。
Symfoware まとめ

PR




検索フォーム

月別アーカイブ