Ractive.jsのテンプレートの使い方まとめ

汎用テンプレート規格Mustacheとほぼ完全互換

http://docs.ractivejs.org/latest/mustaches

公式サイト曰く、Ractive.jsのテンプレートエンジンはMustachesと99%互換。
Mustache.js本家はこちら : https://github.com/janl/mustache.js

1. 変数表示

<script id="template" type="text/ractive">
  <div>{{ value }}<div>
</script>

2. 配列展開

var test = new Ractive({
  el: ***,
  template: ***,
  data: {
    array: [
      'aaaaa',
      'bbbbb',
      'ccccc',
    ]
  }
});

<script id="template" type="text/ractive">
  {{ #array }}
    <p>{{.}}</p>
  {{ /array }}
</script>

もしくは

<script id="template" type="text/ractive">
  {{ #array }}
    <p>{{this}}</p>
  {{ /array }}
</script>

3. 配列内オブジェクト展開

var test = new Ractive({
  el: ***,
  template: ***,
  data: {
    object: [
      {id: 'aaa', name: 111},
      {id: 'bbb', name: 222},
      {id: 'ccc', name: 333}
    ]
  }
});

<script id="template" type="text/ractive">
  {{ #object }}
    <p>{{ id }}</p><p>{{ name }}</p>
  {{ /object }}
</script>

4.条件分岐

<script id="template" type="text/ractive">
  {{ #if value }}
    <div><img src="***.jpg" alt="image"></div>
  {{ /if }}
</script>

Ractive.js拡張記法

http://docs.ractivejs.org/latest/mustaches#extensions

Extension以下はRactive.jsの独自拡張。
オブジェクトの展開や複雑な条件分岐がサポートされている。
またテンプレート内でjavascriptネイティブの関数の使用が可能。

1. オブジェクトの展開

以下の例ではiにpriceとamountが順に展開される。

var test = new Ractive({
  el: ***,
  template: ***,
  data: {
    object: {price: 100, amount: 500}
  }
});

<script id="template" type="text/ractive">
  {{#object:i}}
    <div>{{ i }} : {{ value * 1.08 }} yen</div>
  {{/bars}}
</script>

2. 複雑な条件分岐

Mustacheではbooleanによる分岐しかサポートしていないが、Ractive.jsでは比較演算子を用いた条件分岐を行える。
拡張によって否定に!を用いることも出来る。

<script id="template" type="text/ractive">
  {{#if (love === 'makichan')}}
     <p>My heart pyonpyon.</p>  
  {{/if}}
</script>

より複雑な分岐はテンプレート関数を作成して埋め込む方法で綺麗に記述できる
http://qiita.com/NewGyu/items/52025ae0c77de9260c48

3. テンプレート内での関数使用

<script id="template" type="text/ractive">
  {{ parseInt(value) + parseInt(value2) }}
</script>

代表的なものは以上。
今後も継続して編集していきます。