WP REST APIで読み込んだデータをriot.jsで表示してみました。
すごくざっくりとやり方をメモっておきます。
ライブラリの読み込み
<script src='http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/riot/2.5.0/riot+compiler.min.js'></script>
今回はCDNから読み込みました。
ヘッダやフッタ周りに書くとうまく動かなくて、結局riot用の記述をした上のあたりに挿入してます。
独自タグ
riot.jsでは独自にタグを定義して、jsでテンプレート化した内容を独自タグの埋め込み場所にまるっと入れ込む感じで動作します。
すごくシンプルな例としてはこんな感じです。
※20161125肝心な記述が抜けていたので追加しました。
<html>
<head></head>
<body>
//埋め込む部分を指定するタグ
<card data='{ data }'></card>
<script src='http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/riot/2.5.0/riot+compiler.min.js'></script>
//タグの中身を定義
<script type="riot/tag">
<card>//上記の独自タグと一致させる
<ul>
<li each={ data }>//data要素ごとにループを回す記述
<section>
<h1><a href="{ link }" >{ title.rendered }</a></h1>
</section>
</li>
</ul>
var posts = this;
var url = '<?php echo home_url(); ?>/wp-json/wp/v2/posts?per_page=100';
$.ajax({
url: url,
type:'GET',
dataType: 'json',
data : {
filter: {
}
},
timeout:10000,
}).done(function( data ){
posts.data = data
posts.update()
});
</card>
</script>
<script>
riot.mount('*');
</script>
</body>
</html>
今回、urlにはWP REST APIで記事一覧を読み込むURLを記述しました。
これを実行すると、WP REST APIででJSONデータを取ってきて、script内で定義したテンプレートに従い展開して、上で定義したタグの中身に、テンプレートの内容（この場合<ul>〜</ul>）が挿入されます。
{ XXX }の中にはJSONデータのオブジェクト名を指定すれば、そこに格納された値が表示されます。
関数も設定できる
変数のようにしてタグに設定して動かす関数を定義できます。
例えば以下のように書くと、aタグをクリックした場合にactiveというクラスが挿入されます。
<a onClick={ active } href="#">メニュー１</a>
active(e){
e.preventDefault();
$(e.target).addClass('active');
}
