読者です 読者をやめる 読者になる 読者になる

WEBエンジニア奮闘記

日々の業務から思ったこと、学んだことを書き連ねていきます。

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

Riot.js アイディア プログラミング JavaScript

はじめに

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 なくても上記みたいに簡単に実装できますしね。では〜