1

javascriptなどで動的に読み込む際、よく使われる、下記のようなコードを使っていますが、riot.jsにて、mountができずに困っています。updateやcallbackの実行位置など、試すも、うまくいきません。loadscript自体は動いていて、DOMに追加も確認できています。

30個ぐらい、読み込むべきものがあり、headに全部書いても良いのですが、できれば、必要になった段階で、動的に読み込み、mountしたいと思っています。(いや、30個読めば良いとか、お気づきの点があれば、教えて下さい。)

function loadScript(src, callback) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = src;
    script.type = "riot/tag";
    head.appendChild(script);
    callback();
}

2 件の回答 2

3

自分のやりたいことができました。ソースコードを斜め読みしていると、virtualDomというものを見つけ、事前にcompileScriptsあたりでリストアップされたものをmount('*')することはできても、リストにないものは走査されないのだろうと理解しました。

test.html

<html>
<head>
<script src="riot+compiler.min.js"></script>
</head>
<body>
<test1></test1>
<test2></test2>
<script type="riot/tag" src="test1.tag"></script>
<script>riot.mount('*');</script>
</body>
</html>

test1.tag

<test1>
 <button onclick='{clicked}'>test</button>
</test1>
this.clicked = function(e) {
 riot.compile('test2.tag', function(){
  riot.mount('test2')
 })
}

test2.tag

<test2>
<span>{ test }</span>
this.test = 'hello world'
</test2>

riot.compileを呼び出すやり方が正しいのか、私には分かりません。今回は、今後コードを書くのに、いま調べておきたいことだったので、問題解決になったと感じています。

http://riotjs.com/ja/guide/compiler/

「タグインスタンスにアクセスする」という項があり、ちゃんと書いてあるじゃないか、という話でした。

0

手前味噌で恐縮ですが、こちらの質問の回答が参考になるかと思います。
riot.mount('*') を、 window.onload内で行うというものです。
既に試した上でうまく行っていなかったらゴメンナサイ。

1
  • 事前に見つけていて、試していたのですが、私はうまくいきませんでした・・・。 Commented 2016年10月19日 14:47

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。