teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

追記

2018/12/26 08:22

投稿

kotat
kotat

スコア23

answer CHANGED
@@ -2,4 +2,48 @@
2
2
 
3
3
  DOMやRiotオブジェクトにはloadというメソッドは存在しないと思いますので、最初に提示されているコードを実行した時点で`this.refs.hoge.load is not a function`といったようなエラーがコンソールに表示されるはずです。
4
4
 
5
- …が、そちらも出ている様子は無さそうなので、このloadを使った書き方は、何を参考にコーディングされたものか教えていただけますでしょうか。おそらくですが、参考されているリファレンスがRiotJSと関係のないもののような気がしています。
5
+ …が、そちらも出ている様子は無さそうなので、このloadを使った書き方は、何を参考にコーディングされたものか教えていただけますでしょうか。おそらくですが、参考されているリファレンスがRiotJSと関係のないもののような気がしています。
6
+
7
+ ## 追記 2018.12.26
8
+
9
+ 最終的に`/app/api/hoge/list`から何かしらのデータを取得して処理したいとお考えのようなので、一応サンプルを置いておきます。
10
+
11
+ ```html
12
+ <!DOCTYPE html>
13
+ <html lang="ja">
14
+ <head>
15
+ <meta charset="UTF-8">
16
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
17
+ <title>teratail162507</title>
18
+ </head>
19
+ <body>
20
+ <my-tag></my-tag>
21
+
22
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
23
+ <script type="riot/tag">
24
+ <my-tag>
25
+ <p>現在時刻</p>
26
+ <p>{ time }</p>
27
+
28
+ this.on('mount', () => {
29
+ fetch('https://ntp-a1.nict.go.jp/cgi-bin/json')
30
+ .then(res => res.json())
31
+ .then(this.done)
32
+ })
33
+
34
+ done(res) {
35
+ this.time = new Date(res.st * 1000).toLocaleString()
36
+
37
+ this.update()
38
+ }
39
+ </my-tag>
40
+ </script>
41
+
42
+ <script>
43
+ riot.mount('my-tag')
44
+ </script>
45
+ </body>
46
+ </html>
47
+ ```
48
+
49
+ モダンブラウザならfetchというメソッドが使えますので、上記サンプルではそれを使い、NICTが提供している現在時刻取得APIから現在時刻を取得して表示しています。