Riot ajaxなど非同期通信後の再描画

ajax通信でデータを取得。
Riotで画面を再描画してみました。
Riot ajaxで取得したjsonデータをテーブルに表示する(axios使用)

よくドキュメントを読んでみると、updateは引数を取ります。
API · カスタムタグ


変更前のソース



変更前はこんなソースでした。


  1. <!doctype html>
  2. <html lang="ja">
  3.     
  4. <html>
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>Riot + axios</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><input type="button" value="追加" onclick={ add }></div>
  20. <table border="1">
  21.     <thead>
  22.      <tr>
  23.         <td>id</td><td>value</td>
  24.      </tr>
  25.     </thead>
  26.     <tbody>
  27.     <tr each={ items }>
  28.         <td>{ id }</td>
  29.         <td>{ value }</td>
  30.     </tr>
  31.     </tbody>
  32. </table>
  33. var self = this;
  34. self.items = []
  35. add(event) {
  36.      axios.get('/api')
  37.         .then(function (response) {
  38.             self.items = response.data
  39.             self.update()
  40.         })
  41.         .catch(function (error) {
  42.             console.log(error)
  43.         });
  44. }
  45. </my-tag>
  46. </script>
  47. <!-- マウント -->
  48. <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>
  49. <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.4.0/riot%2Bcompiler.min.js"></script>
  50. <script>
  51. riot.mount('my-tag')
  52. </script>
  53.     
  54. </html>




self.update()で変更後のデータを渡すようにしてやります。


  1. <!doctype html>
  2. <html lang="ja">
  3.     
  4. <html>
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>Riot + axios</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><input type="button" value="追加" onclick={ add }></div>
  20. <table border="1">
  21.     <thead>
  22.      <tr>
  23.         <td>id</td><td>value</td>
  24.      </tr>
  25.     </thead>
  26.     <tbody>
  27.     <tr each={ items }>
  28.         <td>{ id }</td>
  29.         <td>{ value }</td>
  30.     </tr>
  31.     </tbody>
  32. </table>
  33. var self = this;
  34. self.items = []
  35. add(event) {
  36.      axios.get('/api')
  37.         .then(function (response) {
  38.             //self.items = response.data
  39.             //self.update()
  40.             
  41.             // 変更後のデータを設定
  42.             self.update({items : response.data})
  43.         })
  44.         .catch(function (error) {
  45.             console.log(error)
  46.         });
  47. }
  48. </my-tag>
  49. </script>
  50. <!-- マウント -->
  51. <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>
  52. <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.4.0/riot%2Bcompiler.min.js"></script>
  53. <script>
  54. riot.mount('my-tag')
  55. </script>
  56.     
  57. </html>




動作は変わりません。
こちらのほうがすっきりしていて良いですね。


関連記事

コメント

非公開コメント

プロフィール

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

PR




検索フォーム

月別アーカイブ