【JavaScript】テンプレートエンジンHandlebars.jsの基礎的な使い方

handlebarsjs-2

こんにちわ。@giant_morinkeyです。
JavaScriptのテンプレートエンジンHandlebars.jsのダウンロード方法と基本的な使い方を紹介します。

Handlebars.jsは、ループやIF文や自作関数を用意する等など、様々なことが出来る便利なJsライブラリです。
様々なことは出来ますが、基本的なことだけでも、シンプルなHTMLであれば十分対応することが出来ます。

[スポンサーリンク]

このページでやること

Handlebars.jsの基本的な使い方を紹介します。
ループやIF文や自作関数について、さわりだけ紹介します。

Handlebars.jsのダウンロード

こちらのページからダウンロードできます。
今現在の最新バージョンは、1.3.0です。
handlebarsjs-3

Handlebars.jsを使ったサンプルソース

<!doctype html>
<html>
<head>
<meta charset="utf-8" content="">
<title>exflexfixedのサンプル</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script src="./js/handlebars-v1.3.0.js"></script>

<!-- スクリプト部分 -->
<script type="text/javascript">
<!--
function createTemplate(){
	var value = {
			  title: 'handlebarsのサンプルページ',
			  explain: 'handlebarsを使って、テンプレートを読み込んでいます。',
			  form: {
			    textarea: 'this is textarea',
			    submit: 'リロードします。'
			  }
			};
	template = Handlebars.compile($('#template').html());
	$('#display').html(template(value));
}
// -->
</script>

<!-- テンプレート部分 start -->
<script id="template" type="text/x-handlebars-template">
	<h1>{{title}}</h1>
	<p>{{explain}}</p>
	<form>
		<textarea name="kanso" rows="4" cols="40">{{form.textarea}}</textarea>
		<br/>
		<input type="submit" value="{{form.submit}}">
	</form>
</script>
<!-- テンプレート部分 end -->

</head>

<body bgcolor="#e2e2e2">

<input type="button" value="テンプレートを読込" onClick="createTemplate()">
<br/>
<div id="display"></div>

</body>
</html>

デモ

実際に動かすことが出来ます

解説

テンプレート自体は39行目のscriptタグのtype="text/x-handlebars-template"で囲った箇所がテンプレートとなります。
値を可変にする箇所は、{{title}}のようにして下さい。

テンプレートへ値をセットするのは、23行目になります。
テンプレートの値は、JSON形式です。
以下のように、階層化することも可能です。

var value = {
              title: 'handlebarsのサンプルページ',
              explain: 'handlebarsを使って、テンプレートを読み込んでいます。',
              form: {
                textarea: 'this is textarea',
                submit: 'リロードします。'
              }

ループやIF文や自作関数について

このページでは詳細を紹介していませんが、Handlebars.jsでは、ループやIF文や自作関数を使うことが出来ます。
英語での説明になりますが、コチラのページで確認することが出来ます。

The with helperが、自作関数の使用方法の解説になります。
Simple Iteratorsが、ループの解説になります。
Conditionalsが、IF文の解説になります。

handlebars-basic-4

さいごに

Handlebars.jsは簡単に使えるので、個人的にはとても重宝しているライブラリです。
JavaScriptのテンプレートエンジンとしては、軽量で非常に優秀なライブラリです。

ループやIF文が使えると、テンプレートエンジンを使う幅がぐっと広くなります。
ループ等の処理については、今後ブログで紹介していきます。
それでは!