Ractive.jsで、指定した位置にテンプレートを貼り付ける

最終更新日:2015-08-09

まずは基本の基本となるテンプレート貼り付けから紹介します。

<body>
  <section id="container"></section>

  <script id="myTemplate" type="text/ractive">
    <h1>Welcome!</h1>
  </script>

  <script src='http://cdn.ractivejs.org/0.7.1/ractive.js'></script>
  <script>
    var ractive = new Ractive({
      el : '#container',
      template : '#myTemplate'
    });
  </script>
</body>

順に見ていきましょう。

貼り付け先のブロック要素を用意する

まず、テンプレート貼り付け先となるブロック要素を用意します。後にid指定で参照するのでidをつけておきます。

<section id="container"></section>

テンプレートを用意する

テンプレートは、type="text/ractive"なscriptタグの中に記述します。こちらも後にid指定で参照するのでidもつけておきます。

<script id="myTemplate" type="text/ractive">
  <h1>Welcome!</h1>
</script>

Ractive.jsを読み込む

これは普通のjsファイル読み込みと同じです。

<script src='http://cdn.ractivejs.org/0.7.1/ractive.js'></script>

Ractiveオブジェクトを作成する

テンプレートの貼り付けはRactiveオブジェクトの作成で行います。elフィールドで貼り付け先を、templateフィールドでどのテンプレートを貼り付けるか指定します。

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