Ember.js Template Handlebars helpers: Outlet

Ember.js Template Handlebars helpers: Outlet

by jdcravens

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<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>

<script id="tmpl2" type="text/x-handlebars-template">
    {{#each users}}
        <p>{{name}}</p>
    {{/each}}
</script>

  <div class="container">
    <div id="content"></div>
    <div id="list-content"></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;


var players = [
       {
         name: 'CrafterJohn',
         status: {isActive: true, isOnline: true} 
       },
       {
         name: 'MinerPaul', 
         status: {isActive: true, isOnline: false} 
       },
       {
         name: 'ExplorerRingo',
         status: {isActive: false, isOnline: false}
       }          
      ];

var tmpl2 = Handlebars.compile($('#tmpl2').html());

$('#list-content').append(
    tmpl2({ users: players })
);