akifumi-kamata/handlebarsjs-sample01.html

## handlebarsjs-sample01.html
<!DOCTYPE html>
<html>
    <head>
        <script src="./js/handlebars-v2.0.0.js"></script>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    </head>
<body>

    <!-- テンプレート部分 -->
    <script id="template" type="text/x-handlebars-template">
        <h1 class="header">{{title}}</h1>
        <div>メッセージ:{{message}}</div>
    </script>
    <!-- テンプレート部分 -->

    <!-- ここがテンプレートのデータに置き換わります -->
    <div id="contents"></div>

    <!-- テンプレートにデータをセットしHTMLを表示 -->
    <script >

        var values = {
                title: 'Handlebars sample01',
                message: 'ここにメッセージが表示されます'
            }

        var template = Handlebars.compile($('#template').html());

        $('#contents').html(template(values));

    </script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="./js/handlebars-v2.0.0.js"></script>
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	</head>
	<body>

	<!-- テンプレート部分 -->
	<script id="template" type="text/x-handlebars-template">
	<h1 class="header">{{title}}</h1>
	<div>メッセージ:{{message}}</div>
	</script>
	<!-- テンプレート部分 -->

	<!-- ここがテンプレートのデータに置き換わります -->
	<div id="contents"></div>

	<!-- テンプレートにデータをセットしHTMLを表示 -->
	<script >

	var values = {
	title: 'Handlebars sample01',
	message: 'ここにメッセージが表示されます'
	}

	var template = Handlebars.compile($('#template').html());

	$('#contents').html(template(values));

	</script>

	</body>
	</html>