wpo365/handlebarsjs.index.html

## handlebarsjs.index.html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.4.2/handlebars.js"></script>
  </head>
  <body>
    <script id="entry-template" type="text/x-handlebars-template">
      <div class="entry-main">
        {{! #gallery is a so-called block expression for which a custom helper has been registered }}
        {{#gallery posts}}
          <div class="entry">
            {{! ../chapter references a property on the parent of the current block }}
            <h1>{{../chapter}} - {{title}}</h1>
            <div class="body">
              {{! Three mustaches mean that the resulting HTML isn't escaped }}
              {{{body.raw}}}
              {{! as opposed to the "normal" two mustaches }}
              <p>{{body.text}}</p>
            </div>
            <div class="link">
              {{url href=href target="_blank" label=label}}
            </div>
          </div>
        {{/gallery}}
      </div>
    </script>

    <!-- setting up global helpers -->
    <script type="text/javascript">
      /**
       * Format an URL
       */
      Handlebars.registerHelper("url", function(options) {
        // options should have three properties of href, target and label
        href = Handlebars.Utils.escapeExpression(options.hash.href);
        target = Handlebars.Utils.escapeExpression(options.hash.target);
        label = Handlebars.Utils.escapeExpression(options.hash.label);
        const result =
          '<a href="' + href + '" target="' + target + '">' + label + "</a>";
        return new Handlebars.SafeString(result);
      });
      /**
       * Format an URL
       */
      Handlebars.registerHelper("gallery", function(posts, options) {
        // options has a special member fn that is in fact the "inner" template of the current block expression
        let result = "";
        for (var i = 0; i < posts.length; i++) {
          result += options.fn(posts[i]);
        }
        return result;
      });
    </script>
    <!-- using the handlebars template -->
    <script type="text/javascript">
      // Get the template
      var source = document.getElementById("entry-template").innerHTML;

      // Compile it
      var template = Handlebars.compile(source);

      // Create some context
      var context = {
        chapter: "Publishing for dummies",
        posts: [
          {
            title: "My New Post",
            body: {
              raw: "<p>This is my first post!<p>",
              text: "This is my first post!"
            },
            href: "https://www.sbb.ch",
            label: "Read more ..."
          },
          {
            title: "Another Post",
            body: {
              raw: "<p>This is my second post!<p>",
              text: "This is my second post!"
            },
            href: "https://www.sbb.ch",
            label: "Read more ..."
          }
        ]
      };

      // Merge template with context
      var html = template(context);

      // Output the HTML
      document.write(html);
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.4.2/handlebars.js"></script>
	</head>
	<body>
	<script id="entry-template" type="text/x-handlebars-template">
	<div class="entry-main">
	{{! #gallery is a so-called block expression for which a custom helper has been registered }}
	{{#gallery posts}}
	<div class="entry">
	{{! ../chapter references a property on the parent of the current block }}
	<h1>{{../chapter}} - {{title}}</h1>
	<div class="body">
	{{! Three mustaches mean that the resulting HTML isn't escaped }}
	{{{body.raw}}}
	{{! as opposed to the "normal" two mustaches }}
	<p>{{body.text}}</p>
	</div>
	<div class="link">
	{{url href=href target="_blank" label=label}}
	</div>
	</div>
	{{/gallery}}
	</div>
	</script>

	<!-- setting up global helpers -->
	<script type="text/javascript">
	/**
	* Format an URL
	*/
	Handlebars.registerHelper("url", function(options) {
	// options should have three properties of href, target and label
	href = Handlebars.Utils.escapeExpression(options.hash.href);
	target = Handlebars.Utils.escapeExpression(options.hash.target);
	label = Handlebars.Utils.escapeExpression(options.hash.label);
	const result =
	'<a href="' + href + '" target="' + target + '">' + label + "</a>";
	return new Handlebars.SafeString(result);
	});
	/**
	* Format an URL
	*/
	Handlebars.registerHelper("gallery", function(posts, options) {
	// options has a special member fn that is in fact the "inner" template of the current block expression
	let result = "";
	for (var i = 0; i < posts.length; i++) {
	result += options.fn(posts[i]);
	}
	return result;
	});
	</script>
	<!-- using the handlebars template -->
	<script type="text/javascript">
	// Get the template
	var source = document.getElementById("entry-template").innerHTML;

	// Compile it
	var template = Handlebars.compile(source);

	// Create some context
	var context = {
	chapter: "Publishing for dummies",
	posts: [
	{
	title: "My New Post",
	body: {
	raw: "<p>This is my first post!<p>",
	text: "This is my first post!"
	},
	href: "https://www.sbb.ch",
	label: "Read more ..."
	},
	{
	title: "Another Post",
	body: {
	raw: "<p>This is my second post!<p>",
	text: "This is my second post!"
	},
	href: "https://www.sbb.ch",
	label: "Read more ..."
	}
	]
	};

	// Merge template with context
	var html = template(context);

	// Output the HTML
	document.write(html);
	</script>
	</body>
	</html>