Riot.js 4 + jQuery ボタンクリックをjQueryで取得し、Riotタグに値を渡す

既存のjQueryを利用したアプリケーション。
ajaxでデータを取得し、テーブルに表示する処理を書くのが面倒なので、
表示部分だけRiotの機能を利用したい。

サンプル



ポイントは
・riot.mountした戻り値のコンポーネントを大切にとっておく
・updateメソッドで変更後のデータを渡す
・riot tagではstateオブジェクトを介してデータを取得する


・index.html


  1. <html lang="ja">
  2. <head>
  3. <meta charset="UTF-8">
  4.     <title>riot sample</title>
  5. </head>
  6. <body>
  7.     <div><input type="button" value="データ表示" id="show"></div>
  8.     <!-- タグの表示位置 -->
  9.     <my-tag></my-tag>
  10.     <!-- タグの定義ファイルを指定 -->
  11.     <script src="my-tag.riot" type="riot"></script>
  12. <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  13. <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/4.1.1/riot+compiler.min.js"></script>
  14. <script>
  15. (async function main() {
  16.     await riot.compile()
  17.     // mountした戻り値のコンポーネントを保持
  18.     // コンポーネントは配列であることに注意
  19.     const mytag = riot.mount('my-tag')
  20.     // jQueryでボタンクリックを取得
  21.     $('#show').on('click', function() {
  22.         // テーブルに表示するデータ
  23.         const items = [
  24.             {id:1, name:'初めての'},
  25.             {id:2, name:'Riot'}
  26.         ];
  27.         // コンポーネントは配列
  28.         // 先頭のupdateメソッドにデータを渡す
  29.         mytag[0].update({items:items})
  30.         
  31.     })
  32. }())
  33. </script>
  34. </body>




・my-tag.riot


  1. <my-tag>
  2.     <table>
  3.         <thead>
  4.             <tr>
  5.                 <th>id</th>
  6.                 <th>name</th>
  7.             </tr>
  8.         </thead>
  9.         <tbody>
  10.             <!-- updateで設定された値はstateオブジェクトに配置される -->
  11.             <tr each={ item in state.items }>
  12.                 <td>{item.id}</td>
  13.                 <td>{item.name}</td>
  14.             </tr>
  15.         </tbody>
  16.     </table>
  17. </my-tag>




初期表示

988_01.png

ボタンを押すと、狙い通りテーブルにデータが設定できました。

988_02.png


【参考URL】

コンポーネントオブジェクト
関連記事

コメント

非公開コメント

プロフィール

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

PR




検索フォーム

月別アーカイブ