Handlebar.jsを使ったテンプレートの出力、サニタイズ

Handlebars.jsをはじめる
公式のマニュアルより
Handlebars.js: Minimal Templating on Steroids

type="text/x-handlebars-template"を設定したscriptタグのなかにテンプレートとなる内容を記述する

<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>{{title}}</h1>
    <div class="body">
      {{body}}
    </div>
</script>

テンプレートの内容を読込、コンパイル、データの挿入を行う

var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {
  title: "My New Post",
  body: "This is my first post!"
}
var html = template(context);

自動的にサニタイズ処理を行なってくれる
{{hoge}} ブラケットが2つの場合自動的にサニタイズ
{{{hoge}}} ブラケットが3つの場合エスケープ処理を行わない

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{{body}}}
  </div>
</div>

{
  title: "All about <p> Tags",
  body: "<p>This is a post about &lt;p&gt; tags</p>"
}

<div class="entry">
  <h1>All about &lt;p&gt; Tags</h1>
  <div class="body">
    <p>This is a post about &lt;p&gt; tags</p>
  </div>
</div>