Kendo DataSource MVVM Text Data-Bind

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.1/jquery.mockjax.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div id='root'>
    <label>Remote Name:</label> <span data-bind="text: dataSource.view()[0].firstName"><!--firstName--></span>, <span data-bind="text: dataSource.view()[0].lastName"><!--lastName--></span>

    <div>
        <label>Remote Name:
            <input data-bind="value: dataSource.view()[0].firstName" />,
            <input data-bind="value: dataSource.view()[0].lastName" />
        </label>
    </div>
</div>
<br/>
<br/>
<div id='local-root'>
    <label>Local Name:</label> <span data-bind="text: firstName"></span>, <span data-bind="text: lastName"></span>

    <div>
        <label>Local Name:
            <input data-bind="value: firstName" />,
            <input data-bind="value: lastName" />
        </label>
    </div>
</div>
<br/>
<br/>
<div id='test-ajax'> <pre>
    </pre>

</div>

CSS

#root, #local-root {
    height: 20px;
    width: 100%;
    font-family: verdana;
}
#test-ajax {
    font-family:"courier new";
}
label {
    font-weight:bold;
}

JavaScript

$(document).ready(function () {
    /**
     * #local-root example, binds to local data like in the examples
     */
    var personLocalViewModel = kendo.observable({
        firstName: 'James',
        lastName: 'Taylor'
    });

    kendo.bind($('#local-root'), personLocalViewModel);

    /** 
     * set's up a mock api endpoint for jquery and other libraries
     */
    $.mockjax({
        url: "js/data/person.json",
        contentType: "application/json",
        responseText: [{
            firstName: 'James',
            lastName: 'Taylor'
        }]
    });

    /**
     * test-ajax - proves mockajax works
     */
    $.ajax({
        url: "js/data/person.json",
        dataType: 'json',
        success: function (response) {
            $('#test-ajax pre').text(JSON.stringify(response));
        }
    });


    /**
     * #root or remote-root, this dataSource is not bidning to the html, why?
     */
    console.log('KENDO.js', kendo.data);
    var personSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "js/data/person.json",
                dataType: "json"
            }
        }
    });
    personSource.read();

    var personViewModel = kendo.observable({
        dataSource: personSource
    });

    kendo.bind($('#root'), personViewModel);


});