KendoUI MVVM Layout Demo

Trying to get some checkboxes to dynamically create from my viewmodel.

HTML

<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<h2>Kendo MVVM Test</h2>

<div id="app"></div>

<script id="layout-template" type="text/x-kendo-template">
    <div id="content"></div>
</script>

<script id="body-template" type="text/x-kendo-template">
    <div data-bind="source: benefitTypes" data-template="checkbox-template">
    </div>
    <div>
        <strong><span data-bind="text: testContent"></span></strong>
    </div>
</script>

<script id="checkbox-template" type="text/x-kendo-template">
    <label>
        <input name='benefitTypes' type='checkbox' data-bind='checked: selectedTypes, value: value' /> <span data-bind="text:name"></span>
    </label>
</script>

CSS

.label input {
    float: left;
    display: inline-block;
}

JavaScript

var bodyModel = kendo.observable({
    selectedTypes: [],
    benefitTypes: [{
        name: "Medical",
        value: "MED"
    }, {
        name: "Dental",
        value: "DENT"
    }, {
        name: "Vision",
        value: "VIZ"
    }, ],
    testContent: "TEST CONTENT",
});

// Layouts / Views
var layout = new kendo.Layout("layout-template");
var bodyView = new kendo.View("body-template", { model: bodyModel });

$(function () {
    layout.render($("#app"));
    layout.showIn("#content", bodyView);
});