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 フレームワークを身につけられる。お得ですなぁ…。

孤独プログラマー譚

孤独死が近い。

Riot.jsでモデルっぽいものを書いてみる