前人未踏の領域へ アプリ開発編

Android, iOSアプリ開発に関する調査メモ置き場。ほとんどAndroid。はてなダイアリーから移行したため古い記事にはアプリ以外も含まれます。

Handlebarsを理解する

Handlebarsを理解するにあたり、最小構成サンプルによる始めの一歩。

Handlebarsとは

HandlebarsはJavaScriptによるテンプレート変換エンジン。JavaでいうところのVelocityのようなもの。
AjaxJSONオブジェクトを受け取って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その2
{{#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>