6

当然出来ると思ってたのですが上手く動きません。

Riot.jsでカスタムタグ<tag-a>を追加する時、
<script type='riot/tag' src='tag-a.html'></script>
みたいな事書きますよね。
このtag-aの内部で利用する別のカスタムタグ<tag-b>のためのscriptタグを、tag-a.htmlに書きたいのですが、誰か方法を知りませんか?
ただ単にscriptタグをtag-a.htmlに書いただけではダメでした。

よろしくお願いいたします。

--追記(unaristさん、ご指摘どうもありがとうございます!)
誤解されそうな書き方だったので補足します。
<script type='riot/tag' src='tag-b.html'></script>
を、tag-a.htmlに書きたいのです。よろしくお願いいたします。

6
  • 単に<script type='riot/tag' src='tag-a.html'></script><script type='riot/tag' src='tag-b.html'></script> でいいのでは?
    – BLUEPIXY
    Commented 2016年10月17日 10:01
  • @BLUEPIXY 質問が悪くて、書き方を考えていたところでした(タイトルを編集するかも)。もちろんそれでもいいのですが、この質問の意図している事は「tag-aがtag-bを呼び出している事をtag-aの利用者に意識させたくない」という事です。 Commented 2016年10月17日 10:07
  • <script type='riot/tag' src='tag-b.html'></script> を使わずにtag-b.htmlの内容をtag-a.htmlに書けばいいように思います。
    – BLUEPIXY
    Commented 2016年10月17日 10:17
  • @BLUEPIXY 別のアプローチでも構いません。カスタムタグの数が増えて、階層が増えて、共有する子、孫、曾孫カスタムタグなどが増えていった場合に、それらを意識しないで済むRiot.jsのカスタムタグの設計のアイデアをもし思い付いたら、ぜひ教えてください。 Commented 2016年10月17日 10:18
  • 1
    スクリプトの動的読込 は使えるんじゃないですか
    – BLUEPIXY
    Commented 2016年10月17日 10:22

2 件の回答 2

0

スクリプトの動的読込 は使えるんじゃないですか @BLUEPIXYさん

のコメントをヒントに、それらしい事が実現出来たので共有します。

カスタムタグ本体のhtmlを非同期で読み込む事になるので、読み込みが終わる前にマウントしてしまわぬよう、riot.mount('*')window.onloadで行います。

カスタムタグ本体に<script type='riot/tag' src='tag-b.html'></script> を書く方法は、残念ながらまだみつかっていません。

代わりに、カスタムタグ毎に取り込み用jsファイルを追加しました。
tag-a.jsでは、上記のスクリプト動的読込を使い、カスタムタグ本体の
<script type='riot/tag' src='tag-a.html'>
および、内部で利用するカスタムタグtag-bの取り込みjs
<script type='text/javascript' src='tag-b.js'>
をbodyタグに追加します。

tag-b.jsでは、本体のtag-b.htmlと、その中で使うカスタムタグを取り込むためのtag-c1.js、tag-c2.jsをbodyに追加……といった具合で、、、あとはお察しいただけるかと。

あまりスマートな方法ではないものの、上手く機能します。
カスタムタグを配布する場合に役に立ちそうです。

もっといい方法が他に見つかったらぜひ教えてください。

0

こちらで紹介されたriot.compile()を使う方法がスマートだったのでメモしておきます。
riot.compile('tag-b.html',function(){riot.mount('tag-b')})
といった具合で動的に追加できます。

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

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