knockout viewmodel property undefined

http://stackoverflow.com/questions/9281196/knockout-viewmodel-property-undefined

by baryon

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<div id="customersArea" data-bind="foreach: people">
    <div class="section" data-bind="attr: { 'personid': PersonId }" >
        <div class="sectionText">
            <span data-bind="text:PersonId"></span>
            <span data-bind="text:$data.LastName"></span>
            <span data-bind="text:$data.FirstName"></span>
            <span data-bind="with:$data.MailingAddress">
                <span data-bind="text:$data.StreetPartOne"> </span>
                <span data-bind="text:$data.StreetPartTwo">  </span>
                <span data-bind="text:$data.City"></span>
                <span data-bind="text:$data.PostalCode"></span>
            </span>
            <span data-bind="text:$data.EmailAddress"></span>
            <span data-bind="text:$data.MainPhoneNumber"></span>
            <span data-bind="text:$data.MobilePhoneNumber"></span>
        </div>
    </div>
</div>
<hr/>

CSS

.selected { background: #ccc; }

JavaScript

var viewModel = {
    people: ko.observableArray([
    { PersonId: 33, LastName: 'frank'
     //, MailingAddress:{City:'Tokyo'}
     , MainPhoneNumber: '090-1234-5678'
    }        
    ])        
};    
   

ko.applyBindings(viewModel);