Ember.js Template Handlebars helpers: Outlet

Ember.js Template Handlebars helpers: Outlet

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://builds.emberjs.com/release/ember.js"></script>
<script id="tmpl" type="text/x-handlebars-template">
    <h1>Hello, {{ name }}.</h1>
    <h2>Welcome to Handlbars templating!</h2>
</script>

  <div class="container">
    <div id="content"></div>
  </div>

<script id="template" type="text/x-handlebars-template">
    <h1>Hello, {{ name }}.</h1>
    <h2>Welcome to Handlbars templating!</h2>
</script>

  <div class="container">
    <div id="templateContainer"></div>
  </div>

JavaScript

// compile returns a function
var tmpl = Handlebars.compile(document.getElementById('tmpl').innerHTML);

// calling that function w/ data returns the compiled output 
var compiled_output = tmpl({ name: 'RMR 2014' });

// Set content div to the compiled output
document.getElementById('content').innerHTML = compiled_output;


// with JQuery
$(document).ready(function() {
    var templateCompiled = Handlebars.compile($("#template").text());
    var data = { name: "Ember Workshop" };
    $("#templateContainer").html(templateCompiled(data));
});