Ractive.js で状態とイベントを扱う

前回はRactive.jsの導入方法を説明しました。今回は状態とイベントの扱い方を説明します。

状態

newで作成したRactiveオブジェクトには状態を持たせることができます。状態を持たせるには、dataパラメータにオブジェクトの形でセットします。

<script type="text/javascript">
  const r = new Ractive({
    el: '#container',
    template: '#t',
    data: {
      count: 0,
    },
  });
</script>

ここでは、countは0という状態を持たせてみました。

このcount変数はテンプレート内で{{変数名 }}で参照することができます。

<script id="t" type="text/plain">
  <h1>count={{count}}</h1>
</script>

ブラウザで確認すると、ちゃんと{{ count }}の部分が置き換えられています。

イベント

通常のJavaScriptであれば、イベント設定は要素のonclick属性で設定したり、 addEventListener()で設定したりします。 Ractive.jsでは、on-イベント名属性でイベントを設定することができます。

テンプレートにボタンを追加し、on-click="add"を設定してみます。

<script id="t" type="text/plain">
  <h1>count={{count}}</h1>
  <button on-click="add">Add</button>
</script>

addのイベントが発生したとき、どのような処理を行うかは次のようにonパラメータに記述します。

<script type="text/javascript">
  const r = new Ractive({
    el: '#container',
    template: '#t',
    data: {
      count: 0,
    },
    on: {
      add: () => {
        alert('addイベントだよ');
      }
    }
  });
</script>

追加したボタンをクリックすると、onの中に記述した関数が実行されました。

状態を更新する

dataで設定した状態は取得したり更新したりできます。状態を取得するには、 newで生成したRactiveオブジェクトに対しget()を呼びます。 更新するにはset()を呼びます。

addイベント発生時にカウントを1増やしてみましょう。

<script type="text/javascript">
  const r = new Ractive({
    el: '#container',
    template: '#t',
    data: {
      count: 0,
    },
    on: {
      add: () => {
        const currentCount = r.get('count');
        r.set('count', currentCount + 1);
      }
    }
  });
</script>

ボタンをクリックすると、countの値が1つ増えていることが確認できます。

まとめ

Ractive.jsで状態とイベントの扱い方を説明しました。この機能だけでも簡単な計算アプリを 作ることができるので、やってみましょう。