1.3.6. fejezet, Sablonok

A JavaScript-ben is megoldották a sablonok kezelését. Egyik ilyen például a HandlebarsJS, aminek a szintaktikája nagyban megegyezik a Mustage-val.

<html>
<head>
<script src="handlebars-v4.0.11.js"></script>
<script>
	function test() {
      var source   = document.getElementById("entry-template").innerHTML;
      var template = Handlebars.compile(source);
      var context = {title: "My New Post", body: "This is my first post!"};
      var processedHtml = template(context);
      document.getElementById("entry").innerHTML = processedHtml;
	}
  </script>
</head>
<body>
	<script id="entry-template" type="text/x-handlebars-template">
	  <div class="entry">
		<h1>{{title}}</h1>
		<div class="body">
		  {{body}}
		</div>
	  </div>
	</script>
	<form>
          <input type="button" onclick="test()" title="compile" value="compile"></input>
	</form>
	<div id="entry"></div>
</body>
</html>