

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

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

[code]

    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();
    }
    
[/code]


CC BY-SA 3.0
2016-10-19T04:17:56.453
29689
2017-01-16T15:40:12.380
2017-01-16T15:40:12.380
8000
19218
question
javascript
動的に読み込んだタグをmountすることができない


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


CC BY-SA 3.0
2016-10-19T05:57:14.467
29691
2016-10-19T05:57:14.467
2020-06-17T08:14:45.997
-1
18718
29689
answer


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

test.html

[code]

    <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>
    
[/code]

test1.tag

[code]

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

test2.tag

[code]

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

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

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

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


CC BY-SA 3.0
2016-10-19T15:00:21.023
29713
2016-10-20T02:51:41.863
2016-10-20T02:51:41.863
19218
19218
29689
answer