EMBER WORKSHOP: HTMLBars - no bind-attr

HTMLBars - no bind-attr

HTML

<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="https://rawgithub.com/ebryn/0bbe6639da1166bef3ee/raw/c5f715bbee4200d328065fdb34b0bb49f2d748cf/ember-htmlbars-dont-use-me-anywhere-else.prod.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script type="text/x-htmlbars" id="htmlbars">
    <ul>
    {{#each users}}
      <li class="type {{playerType}}">{{name}}</li>
    {{/each}}
    </ul>    
</script>

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

CSS

.type {
    padding: 10px;
    border: 1px solid #000;
}
.crafter {
    color: #fff;
    background-color: brown;
}
.miner {
    color: #000;
    background-color: yellow;
}
.explorer {
    color: #fff;
    background-color: black;
}

JavaScript

$(document).ready(function() {
    
    var players = [
       {
         name: 'CrafterJohn',
         playerType: 'crafter',
         status: {isActive: true, isOnline: true} 
       },
       {
         name: 'MinerPaul',
         playerType: 'miner',
         status: {isActive: true, isOnline: false} 
       },
       {
         name: 'ExplorerRingo',
         playerType: 'explorer',  
         status: {isActive: false, isOnline: false}
       }          
      ];
    
    var templateCompiled = Handlebars.compile($("#htmlbars").text());
    var data = { users: players };
    $("#templateContainer").html(templateCompiled(data));
    
});