読者です 読者をやめる 読者になる 読者になる

Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

Riot.jsその0002 riot.mountするときにoptsを渡す

制作 javascript riotjs

参考にさせて頂いたページ

Riot 2.0 | A React-like UI library

Riot.js 2.0 を触ってみた — まだReactで消耗しているの? - Qiita

バージョン

Riot v2.0.15

riot-sample.htmlの記述内容

<body>
  <elm-example></elm-example>
  <script src="./js/core/riot+compiler.js"></script>
  <script type="riot/tag" src="./js/tags/riot-sample.tag"></script>
  <script>
    riot.mount('elm-example', {
      heading: 'タイトル'
    })
  </script>
</body>

riot-sample.tagの記述内容

<elm-example>
  <h1>{ opts.heading }</h1>
  <p>本文テキスト</p>
</elm-example>

このソースコードについて

以下のようにしてriot.mount()の第二引数に連想配列を渡すと、この例では.tagファイルの中でopts.headingが使用できる。

    <script>
      riot.mount('elm-example', {
        heading: 'タイトル'
      });
    </script>

今回はここまで。