Ractive.jsのデフォルトデリミタ{{hoge}}を変更する方法

デリミタの衝突を防ぐ

SmartyやLaravel.Blade等のテンプレートエンジンとRactive.jsを併用しようとすると、
{{ hoge }}がサーバ側の構文解析に巻き込まれて画面から消えます。
サーバ側のデリミタを変更する方法もあるのですが、ここではRactive.js側で対処する方法を説明します。

Ractive.defaults.delimiters

http://docs.ractivejs.org/latest/ractive-defaults

Ractiveコンストラクタに渡せる全ての値について、Ractive.defaultsからデフォルト値を定義出来ます。
その中にdelimitersという値があるのでこちらを変更します。

自分は<@ @>を利用することが多いのですが、テンプレートエンジンの種類によっては構文と衝突する可能性があります。
他にも<% %>や<$ $>も見やすくてオススメなので場合によって使い分けてください。

script

Ractive.defaults.delimiters = [ '<@', '@>' ];

var ractiveObject = new Ractive({
  el: '#continer',
  template: '#template',
  data: {
    hoge: 'aaa'
  }
});

html

<div id="continer">
  <script id="template" type="text/ractive">
    <@ hoge @>
  </script>
</div>