ycatch/example_for_mustache2.js.html

## example_for_mustache2.js.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>mustache.js | Usage</title>
    <!-- 外部のテンプレートファイルをAjaxで読み込む -->
    <!-- Try this on your Web Server -->
    <style>
        body {
            padding: 30px;
        }
    </style>
</head>

<body>
    <div id="target">Loading...</div>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.0/mustache.min.js"></script>

    <script>
        $(function() {
            var obj = {
                title: "Mustache",
                description: "吾輩は猫である。",
                date: function() {
                    return new Date();
                }
            };

            $.get('template2.mst', function(template) {
                var output = Mustache.render(template, obj);
                $("#target").html(output);
            });
        });
    </script>
</body>

</html>

## template2.mst
<h1>Hello {{title}}</h1>
<div>{{description}}</div>
<div>{{date}}</div>
	<!DOCTYPE html>
	<html lang="ja">

	<head>
	<meta charset="utf-8">
	<title>mustache.js \| Usage</title>
	<!-- 外部のテンプレートファイルをAjaxで読み込む -->
	<!-- Try this on your Web Server -->
	<style>
	body {
	padding: 30px;
	}
	</style>
	</head>

	<body>
	<div id="target">Loading...</div>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.0/mustache.min.js"></script>

	<script>
	$(function() {
	var obj = {
	title: "Mustache",
	description: "吾輩は猫である。",
	date: function() {
	return new Date();
	}
	};

	$.get('template2.mst', function(template) {
	var output = Mustache.render(template, obj);
	$("#target").html(output);
	});
	});
	</script>
	</body>

	</html>
	<h1>Hello {{title}}</h1>
	<div>{{description}}</div>
	<div>{{date}}</div>