Ractive.js チートシート

Ractive.js は、双方向データバインディング、トランジションアニメーション、リアクティブな計算処理を DOM にもたらすテンプレート駆動型 UI ライブラリです。

初期化

const ractive = new Ractive({
  target: '#app',
  template: '#my-template',
  data: {
    greeting: 'Hello',
    user: { name: 'Alice' },
    count: 0
  }
});

---

テンプレート構文 (Mustache)

<!-- データ出力 -->
<h1>{{greeting}}, {{user.name}}!</h1>

<!-- エスケープなしの生 HTML 出力 -->
<div>{{{unescapedHtml}}}</div>

<!-- 双方向入力バインディング -->
<input value="{{user.name}}" />

<!-- 条件分岐 -->
{{#if count > 0}}
  <p>カート内の商品数: {{count}}</p>
{{else}}
  <p>カートは空です。</p>
{{/if}}

<!-- リストの繰り返し描画 -->
<ul>
  {{#each items:i}}
    <li>{{i + 1}}: {{this.name}}</li>
  {{/each}}
</ul>

---

インスタンスメソッド

// リアクティブデータの読み取りと書き込み
ractive.get('user.name');        // => "Alice"
ractive.set('user.name', 'Bob'); // Updates DOM immediately

// 数値操作ヘルパー
ractive.add('count', 1);
ractive.subtract('count', 1);

// 真偽値の反転
ractive.toggle('isVisible');

// 値の変更を監視
ractive.observe('user.name', (newValue, oldValue) => {
  console.log(`名前が変更されました: ${newValue}`);
});

---

イベントハンドリング

<button on-click="@this.fire('submitForm', user)">送信</button>

ractive.on('submitForm', (event, user) => {
  console.log('送信されたユーザー:', user);
});

---

参考リンク

• Ractive.js 公式ドキュメント