Riot.jsでデータバインディングっぽい実装方法

はじめに

Riot.js（以下riot）は非常にシンプルかつ軽量で敷居も低く、とても書きやすいコンポーネント指向のUIライブラリです。（ここまでテンプレートにしたい） 今年の夏にv3.0.0が出てきたことで、さらに熱いので皆さん是非触ってみてください！

ここから本題

Angularには実装されている機能「データバインディング」

ちょっとだけriotから脱線します。「Angular」とは、かのGoogle社が開発したJavaScriptのフレームワークです。最近、いわゆるAngular 2と呼ばれる全く新しいバージョンがリリースされました。これは最初にリリースされたAngularJS 1とは別物です。

（個人的な感想として）このフレームワークの特徴は

• 双方向データバインディング
• html側だけでfilterが実装可
• ハイパフォーマンス
• TypeScriptを利用していることによる恩恵

などなどです。これだけでも魅力的なフレームワークです。 この中でも特に注目を引くのが「データバインディング」。 これは凄く便利な機能なんですが、riotにはこの機能が備わっていません…

ですので、今回はそれっぽい実装の方法をメモ。

実際のコード（今回はv2.6.4を使用）

二通り考えたのでそれぞれ書いていきます。

■1つ目：updateメソッドを使った方法

<demo1>
  <!-- layout -->
  <h3>using update method</h3>
  
  <div>
    <input type='text' name='target' placeholder='type text' oninput="{ update }">
  </div>

  <p>text: { target.value }</p>
</demo1>

こちらは、thisの中にupdate()がいるためscriptタグも不要で簡単かなと思います。またriotでは、inputタグにname属性をつけていれば name.valueで値が取得できるので便利です。

■2つ目：thisオブジェクトを使った方法

<demo2>
  <!-- layout -->
  <h3>using 'this' object</h3>
  
  <div>
    <input type='text' name='target' placeholder='type text' oninput="{ input }">
  </div>

  <p>text: { text }</p>

  <!-- logic -->
  <script>
    this.text = ''

    input(e) {
      this.text = e.target.value
    }
  </script>
</demo2>

こちらは別途input()というメソッドと、入力値表示用の変数this.textを用意し、oninputイベントの発火時にinput()をコールしています。 riotではイベントが発火すると、最後に自動でupdate()が走るため、こちらのデモでは明示的に呼ぶ必要はないです。

※plunkerでデモも作りました。

余談

本当はAngular 2みたいに、組み込みで存在していれば嬉しいんですが、riotはミニマルが売りですので目をつむってますw なくても上記みたいに簡単に実装できますしね。では〜