Handlebars JS Example 1

by tonytlwu

HTML

<script src="http://www.fsfoo.com/js/vendor/handlebars-1.0.rc.2.js"></script>
<script id="some-template" type="text/x-handlebars-template">
  <ul>
    {{#this}}
    <li>
	    <p><strong>Template:<br></strong><code>{{source}}</code></p>
	    <p><strong>Data:<br></strong><code>{{data}}</code></p>
	    <p><strong><code>SafeString</code> used:<br></strong>{{#if safeString}}Yes{{else}}No{{/if}}</p>
    	<p><strong>Render:<br></strong>{{render}}</p>
    </li>
    {{/this}}
  </ul>
</script>

CSS

ul {
  padding-left: 0;
}

li {
  border-bottom: 1px solid #999;
  list-style: none;
}

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: 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));