Riotチートシート

riotの記法を簡単にまとめました。

式評価

{} 内に変数などを記述する。

<p>あなたの名前は{name}ですね</p>

エスケープ

{} を記述したいがコードを評価されたくない場合。
\{ 1 + 2 \}
で
{ 1 + 2 }

ループ

<app>
  <div each={elem, index in array}>
    {index}: {elem}
  </div>

  this.array = ['hoge', 'fuga', 'piyo', 'pompopo']
</app>

array の要素の数だけ、 <div> が増える。
indexは省略可能。
ArrayじゃなくてObjectでもeachできるが、パフォーマンス的な問題で推奨されない。
また、Arrayの要素がObjectだと elem も省略できるが、わかりづらいので個人的に使わない。

表示/非表示

<div if={boolValue}>
  boolValueが偽のときは追加されない
</div>

<div show={boolValue}>
  boolValueが偽のときは display: none; のスタイルがあたった状態で追加される
</div>

<div hide={boolValue}>
  showの逆
</div>

VIRTUAL

ループやifで余分な要素を追加したくない場合は <virtual> タグが使える

<dl>
  <virtual each={item in items}> <!-- virtualタグ自体は追加されない -->
    <dt>{item.key}</dt>
    <dd>{item.value}</dd>
  </virtual>
</dl>

CSSクラス

クラスの指定にObjectが使える

<div class={pom: name === 'popo'}>{name}</div>

name が 'popo' なら <div class="pom">popo</div> に変換される。

おまけ

偽とみなされる値

• false
• null
• undefined
• 0
• NaN
• '' 空文字列

試すときは

ブラウザで試したいときは http://riotjs.com/play/
手元で試したいときは https://github.com/pompopo/riot-boilerplate