Ractive.jsで、データバインドを使う

最終更新日:2015-08-09

Ractive.jsではデータバインドが使えます。これは、指定した位置の値と変数を紐づける機能です。

今回はテンプレートとRactiveオブジェクト生成部分だけ紹介します。

<script id="myTemplate" type="text/ractive">
  <label>Your   name</label><input type="text" value="{{name}}"/><br/>
  <p>Hey {{name}}!!!</p>
</script>

<script>
  var ractive = new Ractive({
    el : '#container',
    template : '#myTemplate',
    data : {
      name : 'test'
    }
  });
</script>

順にみていきましょう。

テンプレート内に変数を用いる

{{変数名}}でテンプレート内に変数を用いることができます。ここでは、nameという変数を2箇所で用いています。

<script id="myTemplate" type="text/ractive">
  <label>Your   name</label><input type="text" value="{{name}}"/><br/>
  <p>Hey {{name}}!!!</p>
</script>

変数の初期値を指定する

テンプレート内で用いる変数の初期値は、dataフィールドに指定したオブジェクトで指定します。

var ractive = new Ractive({
  el : '#container',
  template : '#myTemplate',
  data : {
    name : 'test'
  }
});

この例では、input要素のvalueに変数nameをバインドしています。なので、入力値の変化と同時にp要素内のnameの値も変化します。