Handlebarsを理解するにあたり、最小構成サンプルによる始めの一歩。
Handlebarsとは
HandlebarsはJavaScriptによるテンプレート変換エンジン。JavaでいうところのVelocityのようなもの。
AjaxでJSONオブジェクトを受け取ってHTMLタグを生成するときなどに使える。クライアントサイドにJSP置いてるイメージ。
用意するもの
- handlebars.js Handlebarsのコアモジュール。最新のものをダウンロードして使用
- jqurery.js テンプレートテキストの取得および変換結果の表示で使用。オプション
サンプルコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Handlebars 実行サンプル</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="handlebars-1.0.0.beta.6.js"></script>
<!-- テンプレート IDとtype属性を設定 -->
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
<script type="text/javascript">
$(document).ready(function(){
//テンプレートの取得
var source = $("#entry-template").html();
//テンプレートのコンパイル
var template = Handlebars.compile(source);
//テンプレートに渡すコンテキストオブジェクトを用意する
var context = {
title : "Handlebars テスト！",
body : "HandlebarsはJavaScriptによるテンプレートエンジンです"
}
//テンプレートにコンテキストを適用し結果を得る
var result = template(context);
//結果を出力
$("#contents").html(result);
});
</script>
</head>
<body>
<div id="contents"></div>
</body>
</html>
いろいろな機能を使ったサンプル
- 変数の置換
- 組み込みHelper(あらかじめ用意されているもの)を使用
- オリジナルのHelperを登録して使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Handlebars 実行サンプル</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="handlebars-1.0.0.beta.6.js"></script>
<!-- テンプレート type属性は「text/x-handlebars-template」 -->
<script id="entry-template" type="text/x-handlebars-template">
//basic
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
//with
{{#with author}}
<h2>By {{firstName}} {{lastName}}</h2>
{{/with}}
//each
<ul>
{{#each people}}
<li><a href="/posts/{{../path}}#{{id}}">{{firstName}} {{lastName}}</a>
</li>
{{/each}}
</ul>
//if
{{#if name}}
<h1>{{name.firstName}} {{name.lastName}}</h1>
{{else}}
<h1>Unknown Author</h1>
{{/if}}
//unless
{{#unless license}}
<h3 class="warning">WARNING: This entry does not have a license!</h3>
{{/unless}}
//Helper
<h1>By {{fullName author}}</h1>
//Helperその２
{{#list people}}{{firstName}} {{lastName}}{{/list}}
//Helperでthisを使う
<ul>
{{#each items}}
<li>{{agree_button}}</li>
{{/each}}
</ul>
</script>
<script type="text/javascript">
$(document).ready(
function() {
//テンプレートの取得
var source = $("#entry-template").html();
//テンプレートのコンパイル
var template = Handlebars.compile(source, function() {
});
//テンプレートに渡すパラメータ
var context = {
title : "Handlebars テスト！",
body : "HandlebarsはJavaScriptによるテンプレートエンジンです",
author : {
firstName : "Charles",
lastName : "Jolley"
},
name : {
firstName : "Charles",
lastName : "Jolley"
},
path : "people",
people : [ {
id : "10",
firstName : "Yehuda",
lastName : "Katz"
}, {
id : "11",
firstName : "Carl",
lastName : "Lerche"
}, {
id : "12",
firstName : "Alan",
lastName : "Johnson"
} ],
items : [ {
name : "Handlebars",
emotion : "love"
}, {
name : "Mustache",
emotion : "enjoy"
}, {
name : "SproutCore",
emotion : "want to learn"
} ]
};
//独自のヘルパーファンクションを登録
Handlebars.registerHelper('fullName', function(person) {
return person.firstName + " " + person.lastName;
});
Handlebars.registerHelper('agree_button', function() {
return new Handlebars.SafeString("<button>I agree. I "
+ this.emotion + " " + this.name + "</button>");
});
Handlebars.registerHelper('list', function(items, options) {
var out = "<ul>";
for ( var i = 0, l = items.length; i < l; i++) {
out = out + "<li>" + options.fn(items[i]) + "</li>";
}
return out + "</ul>";
});
//テンプレートとパラメータをマージ
var result = template(context);
//結果を出力
$("#contents").html(result);
});
</script>
</head>
<body>
<div id="contents"></div>
</body>
</html>
