Kendo MVVM Multiple Nested Layout/Views

Trying out multiple nested templates. Not sure if this is allowed and broken, or I am outside the bounds of what these templates can do.

by Reagan Cooper

HTML

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

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

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

<script id="body-template" type="text/x-kendo-template">
    <div>
        <span data-bind="text: testBody"></span>
        <ul data-template="list-template" data-bind="source: testList">
        </ul>
    </div>
</script>

    <script id="list-template" type="text/x-kendo-template">
        <li>
            id: <span data-bind="text: id"></span>
            <br />
            name: <span data-bind="text: name"></span>
        </li>
        <ul data-template="list-detail-template" data-bind="source: vals">
        </ul>
    </script>

        <script id="list-detail-template" type="text/x-kendo-template">    
            <li>
                val: <span data-bind="text: this"></span>
            </li>
        </script>

JavaScript

var bodyModel = kendo.observable({
    testBody: "Body content",
    testList: [
        { id: "1", name: "one", vals: ["a", "b", "c" ] },
        { id: "2", name: "two", vals: ["d", "e", "f" ]  },
        { id: "3", name: "three", vals: ["g", "h", "i" ]  },
        { id: "4", name: "four", vals: ["j", "l", "k" ]  },
        { id: "5", name: "five", vals: ["t", "u", "v" ]  },
        { id: "6", name: "six", vals: ["x", "y", "z" ]  },
    ],
});

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

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