Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

Riot.jsその0003 属性を付与して、opts.hogeとして使用する

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

Riot 2.0 | A React-like UI library

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

バージョン

Riot v2.0.15

riot-sample.htmlの記述内容

  <body>
    <elm-example AAAAA="AAAAAです。" bbbbb="bbbbbです。" cc_cc_c="cc_cc_cです。"></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')
    </script>
  </body>

riot-sample.tagの記述内容

<elm-example>
  <h1>タイトル</h1>
  <p>{ opts.aaaaa }</p>
  <p>{ opts.bbbbb }</p>
  <p>{ opts.cc_cc_c }</p>
</elm-example>

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

<elm-example AAAAA="AAAAAです。" bbbbb="bbbbbです。" cc_cc_c="cc_cc_cです。"></elm-example>のようにすると、.tagファイルの中で

  • opts.aaaaa
  • opts.bbbbb
  • opts.cc_cc_c

がそれぞれ使用できる。

AAAAA="AAAAAです。"のように大文字の属性名にしても、opts.aaaaaとプロパティは小文字で保持されるので、riot-sample.htmlで記述するときの属性は小文字とアンダースコアで記述するのが良さそう。

今回はここまで。