Motomichi Works Blog

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

Riot.jsその0004 カスタムタグの中に任意のhtml要素を入れ子にする <yield/>

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

Riot API

バージョン

Riot v2.0.15

riot-sample.htmlの記述内容

<body>
  <elm-example thisid="1" title="タイトル1">
    <div>inner-content-1</div>
  </elm-example>
  <elm-example thisid="2" title="タイトル2">
    <div>inner-content-2</div>
  </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>{ opts.title }</h1>
  <yield/>
</elm-example>

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

riot-sample.htmlの中で、普通に

  <elm-example thisid="1" title="タイトル1">
    <div>inner-content-1</div>
  </elm-example>

と入れ子にして書いてやるだけで、<div>inner-content-1</div>の部分は

riot-sample.tagの中の<yield/>のところに挿入される。

今回はここまで。