Help us understand the problem. What is going on with this article?

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

More than 5 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>

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

morisuke
Vue.js / Laravelが得意。ご連絡はメールかTwitterでどうぞ。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした