Riot.jsでモデルっぽいものを書いてみる
Riot.jsを初めて触ってみた。
あまりにシンプル過ぎて驚いた!
ほとんど覚えること無しに、それなりに書けそう。
というわけで、前回・前々回の流れで、簡単なサンプルをRiot.jsで書いてみます。
悩んだのが、Riot.jsにはモデルが見当たらない…?
おそらく、Observableがそれにあたるのか…?
とりあえず、モデルっぽいものを使ってみることにします。
HTMLはこれだけ。
<html> <body> <div id="nogi"></div> <div id="nogi-text"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/riot/2.3.18/riot+compiler.js'></script> </body> </html>
モデルの発火、監視を可能にする。
<script> var model = { isNogi: true } riot.observable(model); </script>
これが、カスタムタグ。
HTMLタグと、JavaScriptとが合体してるイメージ。スタイルシートも定義できます。
「このタグはこういう挙動をする」ってのが見て一発で分かる。
わざわざソースコードを追いかけ回す必要もない。便利だなぁ…。
<script type='riot/tag'> <nogi> <button onclick='{ invert }'>{ name }</button> // モデルを更新 this.invert = function () { model.isNogi = !model.isNogi; // 通知イベント発火 model.trigger('hasInverted'); }; // 通知イベントを検知して、要素を描画 model.on('hasInverted', (function () { this.render(); }).bind(this)); this.render = function () { this.name = model.isNogi ? '乃木坂46' : '欅坂46'; }; // 初期描画 this.render(); </nogi> </script>
こちら、別のカスタムタグ。
モデルの発火を検知して、再レンダリングする。
<nogi-text> <p>{ description }</p> // 通知イベントを検知して、要素を描画 model.on('hasInverted', (function () { this.render(); }).bind(this)); this.render = function () { this.description = model.isNogi ? '2011年に結成されました。' : '2015年に結成されました。'; this.update(); }; // 初期描画 this.render(); </nogi-text>
マウントする。マウントって何?
カスタムタグと関連付けます。
<script> // マウント riot.mount('#nogi', 'nogi'); riot.mount('#nogi-text', 'nogi-text'); </script>
覚えるのも書くのも簡単そうなので、せめて公式ドキュメントは全部読んでおこうと思います。
低コストで最新のJavaScriptフレームワークを身につけられる。お得ですなぁ…。