Kendo: why isn't the model applied to the HTML when being bound

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.226/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.226/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.1.226/js/kendo.web.min.js"></script>
<body>
    <form>
        <div id="dialog">
            <input type="text" id="ID" data-bind="value: ID"></input>
            <br/>
            <input type="text" id="Name" data-bind="value: Name"></input>
            <div data-bind="text: ID"></div>
            <div data-bind="text: Name"></div>
        </div>
        
    </form>
</body>

JavaScript

$(function () {
   
   var people = [{
      ID: 4711,
      Name: "Michael G. Schneider"
   }];

   var model = kendo.data.Model.define({
      id: "ID",
      fields: {
         ID: {
            type: "number",
            editable: false
         },
         Name: {
            type: "string",
            validation: {
               required: true
            }
         }
      }
   });

   var datasource = {
      schema: {
         model: model
      },
      data: people
   };

   var ds = new kendo.data.DataSource(datasource);
   ds.fetch(function () {
      kendo.bind($("#dialog"), ds.at(0));
   });
    
});