Introduction

gzipで400byte以下の小さなJavaScriptテンプレートフレームワーク

t.jsは、innerHTMLを使ってDOMにhtmlを挿入するシンプルなライブラリです。

特徴

• 単純な補間(タグをエスケープしません) : {{=value}}
• エスケープして補間 : {{%unsafe_value}}
• 名前空間を使う : {{=User.address.city}}
• if/else構文 : {{value}} <<markup>> {{:value}} <<alternate markup>> {{/value}}
• unless構文 : {{!value}} <<markup>> {{/!value}}
• オブジェクト/配列の繰り返し : {{@object_value}} {{=_key}}:{{=_val}} {{/@object_value}}
• 複数行テンプレートを指定することができます。(必要な改行は削除せずにそのまま記述してください。)
• 同じテンプレートを別の値で複数回レンダリング可能です。
• 全てのモダンブラウザで動作します。

使い方

ファイルをダウンロードしてHTMLでt.min.jsを読み込みます。

<script src="t.min.js"></script>

そして以下のように指定します。

var template = new t("<div>Hello {{=name}}</div>");
document.body.innerHtml = template.render({name: "World!"});

より高度な使い方は、t_test.htmlを確認してください。

デモ

それぞれの構文を使ってHTMLを生成します。 太字が補間の結果です。
※HTMLをscriptタグ内で指定する場合は、type属性が必要です。

JavaScript

var div = document.createElement('div');
var template = new t(document.getElementById('demo').innerHTML);
div.innerHTML = template.render({
  simple_interpolation1: '文字列を挿入しました。',
  simple_interpolation2: '<span style="color:#ff6384">文字の色を変えています。</span>',
  scrubbed_interpolation: '<span style="color:#ff6384">文字の色は変わりません。</span>',
  name: {
    interpolation: '<span style="color:#36a2eb">名前空間を使って補間します。</span>',
  },
  ifelse: {
    disp: 'ifelse.dispは定義されています。',
  },
  unless: {
    disp: 'unless.dispは定義されています。',
  },
  iteration: {
    arr: [
      '要素1', '要素2', '要素3',
    ],
    obj: [
      {id: 1, text: '要素a'},
      {id: 2, text: '要素b'},
      {id: 3, text: '要素c'},
    ],
  }
});
document.getElementById('render').appendChild(div);

HTML

<script id="demo" type="t/template">
  <ul>
    <li>
      単純な補間 :<br>
      <b>{{=simple_interpolation1}}</b><br>
      <b>{{=simple_interpolation2}}</b><br>
      <p class="note">※タグをエスケープしません。</p>
    </li>
    <li>
      エスケープして補間 :<br>
      <b>{{%scrubbed_interpolation}}</b><br>
      <p class="note">※タグをエスケープします。</p>
    </li>
    <li>
      名前空間を使う :<br>
      <b>{{=name.interpolation}}</b><br>
      <p class="note">※タグをエスケープしません。</p>
      <b>{{%name.interpolation}}</b><br>
      <p class="note">※タグをエスケープします。</p>
    </li>
    <li>
      if/else構文 :<br>
      変数が定義されていれば表示<br>
      {{ifelse.disp}}
        <b>{{=ifelse.disp}}</b><br>
      {{/ifelse.disp}}
      <br>
      変数が定義されていれば表示、未定義なら未定義文言を表示<br>
      {{ifelse.nodisp}}
        <b>{{=ifelse.disp}}</b><br>
      {{:ifelse.nodisp}}
        <b>ifelse.nodispは未定義です。</b><br>
      {{/ifelse.nodisp}}
    </li>
    <li>
      unless構文 :<br>
      変数が未定義なら表示<br>
      {{!unless.nodisp}}
        <b>unless.nodispは未定義です。</b><br>
      {{/!unless.nodisp}}
    </li>
    <li>
      オブジェクト/配列の繰り返し :<br>
      配列の繰り返し<br>
      <ul>
      {{@iteration.arr}}
        <li><b>[{{=_key}}] {{=_val}}</b></li>
      {{/@iteration.arr}}
      </ul>
      <br>
      オブジェクトの繰り返し<br>
      <ul>
      {{@iteration.obj}}
        <li><b>[{{=_key}}] {{=_val.id}}:{{=_val.text}}</b></li>
      {{/@iteration.obj}}
      </ul>
    </li>
  </ul>
</script>