[JS] loadメソッド内、コールバック関数が実行されない!

現状

riot.jsのmount関数実行時にapiから情報を取ってくるコードがある

//このコードに特に問題はない
this.on('mount', function () {
    this.refs.hoge.load('/app/api/edit/hoge/list');
});

問題点

apiから情報を取ってきた後に実行する処理を書く必要が出てきた。
→コールバック関数を使用して下記のようにしてみた

this.on('mount', function () {
    this.refs.hoge.load('/app/api/hoge/list',  function() {
      console.log("test");
    });
});

しかしchrome developper toolにconsole.logの内容が表示されません(Opera, Firefox, IE, edge同様)

リファレンス見てみましたが、書き方自体に間違いはなく、単純過ぎて逆に解決方法が不明なのでこちらに質問させていただきました。
よろしくお願いいたします。

追記(試してみたこと)

このように記述するとconsole.logは実行されますが、API処理前に実行されてしまいます

this.on('mount', function () {
    this.refs.hoge.load('/app/api/hoge/list', hoge());
});

function hoge() {
  console.log("test test desu");
}

追記②(試してみたこと)

this.refs.filteredList.load('/app/api/hoge/list', console.log("test"), 10);

loadの引数(URL, complete, addlimit)を追加してみましたが、これも処理前にconsole.logが出力せされてしまいます

行動規範の内容に同意します

回答3件

ベストアンサー

RiotJSのドキュメントを読む限り、this.refsはDOMもしくはRiotオブジェクトが格納されている変数のようです。

DOMやRiotオブジェクトにはloadというメソッドは存在しないと思いますので、最初に提示されているコードを実行した時点でthis.refs.hoge.load is not a functionといったようなエラーがコンソールに表示されるはずです。

…が、そちらも出ている様子は無さそうなので、このloadを使った書き方は、何を参考にコーディングされたものか教えていただけますでしょうか。おそらくですが、参考されているリファレンスがRiotJSと関係のないもののような気がしています。

追記 2018.12.26

最終的に/app/api/hoge/listから何かしらのデータを取得して処理したいとお考えのようなので、一応サンプルを置いておきます。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>teratail162507</title>
7</head>
8<body>
9  <my-tag></my-tag>
10
11  <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
12  <script type="riot/tag">
13    <my-tag>
14      <p>現在時刻</p>
15      <p>{ time }</p>
16
17      this.on('mount', () => {
18        fetch('https://ntp-a1.nict.go.jp/cgi-bin/json')
19        .then(res => res.json())
20        .then(this.done)
21      })
22
23      done(res) {
24        this.time = new Date(res.st * 1000).toLocaleString()
25
26        this.update()
27      }
28    </my-tag>
29  </script>
30
31  <script>
32    riot.mount('my-tag')
33  </script>
34</body>
35</html>

モダンブラウザならfetchというメソッドが使えますので、上記サンプルではそれを使い、NICTが提供している現在時刻取得APIから現在時刻を取得して表示しています。

投稿2018/12/26 04:06

編集2018/12/26 08:22

kotat

総合スコア23

kazoogon

2018/12/26 07:54

回答ありがとうございます。その通りでした、これはJSの関数でもなんでもなく人工的に作られたloadという関数でした。。

kazoogon

2018/12/26 08:25

追記の記載ありがとうございます！

行動規範の内容に同意します

load って３引数なのでコールバック関数は引数３つめにいれないとだめなんじゃないかな

http://semooh.jp/jquery/api/ajax/load/+url,+data,+callback+/

投稿2018/12/21 01:52

退会済みユーザー

総合スコア0

kazoogon

2018/12/21 11:17

回答ありがとうございます。 Jqueryだとそうなんですが、javascriptそのままだと第三引数にcall back関数指定しても起動しないんですよね。。。

行動規範の内容に同意します

this.refsのところが怪しいですね。公式ドキュメント

そもそもthis.refsは要素に簡単にアクセスできるようにするためのものだった気がします。

html
1<tag>
2  <div ref="fuga"></div>
3  <div></div>
4  <script>
5     var tag = this;
6     tag.on('mount', function() {
7        console.log(tag.refs.fuga); // ref="fuga"がついてるdivの情報が出力される
8     })
9  </script>
10</tag>