Ember 0.9.8.1 Template

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.8.1.js"></script>
<script type="text/x-handlebars" data-template-name="hb-variant-item">
    {{#with content as variant}}

    <td class="cen"><input class="variant" id="variant-{{unbound pk}}" type="checkbox"></td>
    <td class="value">{{variant.sku}}</td>
    <td class="value">{{variant.cost}}</td>
    {{#each variant.basic_product_options}}
    <td class="value">{{content}}</td>
    {{/each}}
    <td class="value cen">
      <a data-toggle="modal" href="#editVariationModal" class="btn btn-mini btn-warning">Edit</a>
      <a href="#" class="btn btn-mini disabled pull-right"><i class="icon-resize-vertical"></i></a>
     </td>
    
    {{/with}}
</script>

<script type="text/x-handlebars" data-template-name="hb-variant-list">
    {{#each variant in variants}}
        {{view App.VariantView contentBinding="variant"}}
    {{/each}}
</script>

JavaScript

App = Ember.Application.create();

App.Variant = Em.Object.extend({
    pk: null,
    cost: null,
    sku: null
});

variants = [
    { pk: 1, cost: 42, sku: 'aaa' },
    { pk: 2, cost: 36, sku: 'bbb' },
    { pk: 3, cost: 54, sku: 'ccc' },
    { pk: 4, cost: 89, sku: 'ddd' }
];

App.variantsController = Em.ArrayController.create({
    content: variants.map(function(v) {
        return App.Variant.create(v);
    })
});

App.VariantView = Em.View.extend({
    templateName: 'hb-variant-item',
    tagName: 'tr',
    classNames: ['variant']
});
App.VariantsView = Em.View.extend({
    templateName: 'hb-variant-list',
    tagName: 'table'
});
App.VariantsView.create({
    variantsBinding: 'App.variantsController'
}).append();