Riot.jsの使い方の簡単なメモ

WP REST APIで読み込んだデータをriot.jsで表示してみました。

すごくざっくりとやり方をメモっておきます。

ライブラリの読み込み

今回はCDNから読み込みました。

ヘッダやフッタ周りに書くとうまく動かなくて、結局riot用の記述をした上のあたりに挿入してます。

独自タグ

riot.jsでは独自にタグを定義して、jsでテンプレート化した内容を独自タグの埋め込み場所にまるっと入れ込む感じで動作します。

すごくシンプルな例としてはこんな感じです。

※20161125肝心な記述が抜けていたので追加しました。

今回、urlにはWP REST APIで記事一覧を読み込むURLを記述しました。
これを実行すると、WP REST APIででJSONデータを取ってきて、script内で定義したテンプレートに従い展開して、上で定義したタグの中身に、テンプレートの内容(この場合<ul>〜</ul>)が挿入されます。

{ XXX }の中にはJSONデータのオブジェクト名を指定すれば、そこに格納された値が表示されます。

関数も設定できる

変数のようにしてタグに設定して動かす関数を定義できます。

例えば以下のように書くと、aタグをクリックした場合にactiveというクラスが挿入されます。