フロントエンドのフレームワークはたまにしか使わないのでよく詳細を忘れます。

タグの置き場所

<script type="riot/tag" src="./foobar.tag"></script>

と書くか、元のHTMLに直接

<script type="riot/tag">
  <foobar>
    ...
  </foobar>
</script>

と書くことができます。事前にコンパイルしてtagを1つのJSにまとめることもできるようですが、遊びで使うだけならこの方式で大丈夫でしょう。

タグの書き方

基本的に1ファイルにHTML, CSS, JavaScriptを詰め込みます。

<foobar>
  <p>{ hoge }</p>
  <style>
    p { color: #abcdef; }
  </style>
  this.hoge = piyo;
  foo () {
     ...
  }
</foobar>

JSは<script>タグの中に書くこともできます。メソッドの書き方からわかるように、素のJSというよりは、オブジェクトリテラルやクラスの中にいるような感覚です。

HTMLの中には{ ... }でJSの値を埋め込めます。JS側のthis.hogeがHTMLからはhogeで呼ぶことができます。

タグから値を受け取る

タグには属性名=値という形式で値を渡すことができます。

<foobar baz={ someValue }></foobar>

渡す値はリテラルだけではなく、オブジェクトなども可能です。

タグに渡された属性は、optsから参照することができます。

<hoge content="hello"></hoge>
...
<hoge>
  <p>{ opts.content }</p> <!-- 渡した "hello" が表示される -->
</hoge>

入れ子のタグ

独自のタグの中に他の要素を入れ子にすることができます。

<foobar>
  <p>My name is foobar.
</foobar>

この場合、親で<yield>タグを使うと、その位置に子要素の内容がすべてレンダリングされます。

<foobar>
  <h1>FooBar!!</h1>
  <yield></yield>
</foobar>

riotの起動

riot.compile(function() {
  var tags = riot.mount('*')
})

riot.mount(hoge)でhogeタグをマウントすることができます。

ちなみに、事前にコンパイル済みの場合はriot.compile(...)は不要です。

イベント

イベントは、this.on('EventName', () => { ... });の形でハンドリングすることができます。

重要なイベントとして、最初にタグが生成される時にmountイベントが、表示が更新されるときはupdateイベントが発火されます。

this.on('mount',() => { ... });

ちなみに、画面更新は基本的にriot.update()this.update()を呼ばれたときにしか行われません。

また、this.trigger('EventName', ...args)で独自のイベントを発火させることもできます。

observable

要素だけでなく、任意のオブジェクトに対してイベントの通知を行うことができます。

riot.observable(hoge);

これでhogeontriggerを使えるようになります。また、引数無しでriot.observable()を実行すると、新しいobservableなオブジェクトが返されます。

この方法を使って親子間通信や兄弟間通信をおこなうことができます。

属性を渡すときの諸注意

  • checked等にはboolを渡せる
  • class{ name1: true, name2: false, ... }のようにすることで、trueになっている名前のクラスのみ付与することができる
  • onHogeはイベントハンドラとしての関数を渡せる

便利な属性

  • if={contidion}: conditiontrueのときだけ表示
  • each={objs}: objsの中身ごとに繰り返す。objsの要素がそれ以下のスコープにばらまかれる。前までthisだったやつにはparentでアクセスできる

その他

その他はだいたいここにあります