【JavaScript】【Riot】【勉強】ソースの分割② - ミライスタート　TECH系ブログ

こんばんは。今日も少しRiotを触った石井です。

今回はタグファイルを２つ用意しました。

index.html

<html>
<body>
  <sample></sample>
  <sample2></sample2>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.0.1/riot+compiler.min.js"></script>

  <script type="riot/tag" src="sample.tag">
  </script>
  <script type="riot/tag" src="sample2.tag">
  </script>

<script>
  riot.mount('*',{ title:"テスト" })
</script>
</body>
</html>

sample.tag

<sample>
  <h2>sample.tag</h2>
  <h2>{ opts.title }</h2>

  <style>
    :scope { color:#0000FF }
  </style>
</sample>

sample2.tag

<sample2>
  <h3>sample2.tag</h3>
  <h3>{ opts.title }</h3>

  <style>
    :scope h3 { color:#FF0000 }
  </style>
</sample2>

VB経験が長かったせいか、ソースを見やすいように
ウィンドウやコントロール毎のファイルを作りたくて仕方なかったのですが、
これでようやくHTMLも見やすくなりそうです。