JavaScript
RactiveJS

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

More than 3 years have passed since last update.


汎用テンプレート規格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>

代表的なものは以上。

今後も継続して編集していきます。