kendo listview - databind works

by jwstott

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<div id="example" class="k-content">
               
<!--
 <div id="listView" >
     
 </div>
-->
    <div id="listView" data-role="listview" data-pageable="true" data-selectable="true" data-bind="source: data"  data-template="template"></div>
<div id="pager" class="k-pager-wrap">
    </div>

</div>

<script id="template" type="text/x-kendo-template">
    <li># console.log(data.firstName);#
        <lable>LastName:</lable><span data-bind="text: lastName"></span>
      <label><input type="radio" value="John" data-bind="checked: firstName" />John</label>
            <label><input type="radio" value="Jane" data-bind="checked: firstName" />Jane</label>
            <label><input type="radio" value="Josh" data-bind="checked: firstName" />Josh</label>
    </li>
</script>

JavaScript

var people = [{
    firstName: "John",
    lastName: "Smith",
    email: "[email protected]"},
{
    firstName: "Jane",
    lastName: "Smith",
    email: "[email protected]"},
{
    firstName: "Josh",
    lastName: "Davis",
    email: "[email protected]"},
{
    firstName: "Cindy",
    lastName: "Jones",
    email: "[email protected]"}];


var viewModel = kendo.observable({
    data: people
});

var sharedDataSource = new kendo.data.DataSource({
    data: viewModel.data,
    pageSize: 10
});
kendo.bind(document.body.children, viewModel);
kendo.init($('#listView'));
/*
$("#listView").kendoListView({
    dataSource: sharedDataSource,
    template: kendo.template($("#template").html(),{useWithBlock:false}),
    pageable: true,
    editable: true,

});

$("#pager").kendoPager({
    dataSource: sharedDataSource
});
*/