Handlebars JS Example 1

by tonytlwu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.0/handlebars.min.js"></script>
<script id="some-template" type="text/x-handlebars-template">
  <table>
  	<thead>
    <tr>
	    <th>Template</th>
      <th>Name</th>
      <th><code>Handlebars.SafeString</code> used</th>
      <th>Render</th>
    </tr>
    </thead>
    <tbody>
    {{#this}}
      <tr>
        <td><code>{{source}}</code></td>
        <td><code>{{data}}</code></td>
        <td>{{#if safeString}}Yes{{else}}No{{/if}}</td>
        <td>{{render}}</td>
      </tr>
    {{/this}}
    </tbody>
  </table>
</script>

CSS

th {
  padding: 5px;
}

td {
  border: 1px solid #999;
  padding: 5px;
  vertical-align: top;
}

JavaScript

var source = $("#some-template").html();
var template = Handlebars.compile(source);

var data = [{
	source: '{{[Name]}}',
	data: 'O\'Reilly',
	safeString: false,
  render: (function() {
    var s = '{{[Name]}}';
    var t = Handlebars.compile(s);
    var d = {
      Name: "O'Reilly"
    };
    return t(d);
  })()
}, {
	source: '{{{[Name]}}}',
	data: 'O\'Reilly',
	safeString: false,
  render: (function() {
    var s = '{{{[Name]}}}';
    var t = Handlebars.compile(s);
    var d = {
      Name: "O'Reilly"
    };
    return t(d);
  })()
}, {
	source: '{{[Name]}}',
	data: 'O\'Reilly',
	safeString: true,
  render: (function() {
    var s = '{{[Name]}}';
    var t = Handlebars.compile(s);
    var d = {
      Name: "O'Reilly"
    };
    return new Handlebars.SafeString(t(d));
  })()
}, {
	source: '{{[Name]}}',
	data: 'O<br>s',
	safeString: false,
  render: (function() {
    var s = '{{[Name]}}';
    var t = Handlebars.compile(s);
    var d = {
      Name: "O<br>s"
    };
    return t(d);
  })()
}, {
	source: '{{{[Name]}}}',
	data: 'O<br>s',
	safeString: false,
  render: (function() {
    var s = '{{{[Name]}}}';
    var t = Handlebars.compile(s);
    var d = {
      Name: "O<br>s"
    };
    return t(d);
  })()
}, {
	source: '{{[Name]}}',
	data: 'O<br>s',
	safeString: true,
  render: (function() {
    var s = '{{[Name]}}';
    var t = Handlebars.compile(s);
    var d = {
      Name: "O<br>s"
    };
    return new Handlebars.SafeString(t(d));
  })()
}, {
	source: '{{{[Name]}}}',
	data: 'O<br>s',
	safeString: true,
  render: (function() {
    var s = '{{{[Name]}}}';
    var t = Handlebars.compile(s);
    var d = {
      Name: "O<br>s"
    };
    return new Handlebars.SafeString(t(d));
  })()
}];

$('body').append(template(data));