knockout viewmodel property undefined

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

by rniemeyer

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="textWithInit: 'LastName'"></span>
            <span data-bind="textWithInit: 'FirstName'"></span>
            <span data-bind="if:$data.MailingAddress">
                <span data-bind="with:MailingAddress">
                    <span data-bind="text:StreetPartOne"> </span>
                    <span data-bind="text:StreetPartTwo">  </span>
                    <span data-bind="text:City"></span>
                    <span data-bind="text:PostalCode"></span>
                </span>
            </span>

            <span data-bind="textWithInit: 'EmailAddress'"></span>
            <span data-bind="textWithInit: 'MainPhoneNumber'"></span>
            <span data-bind="textWithInit: 'MobilePhoneNumber'"></span>
        </div>
    </div>
</div>
<hr/>

CSS

.selected { background: #ccc; }

JavaScript

//rewrite binding after making sure that it is initialized
ko.bindingHandlers.textWithInit = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = valueAccessor();

        if (!ko.isObservable(viewModel[value])) {
            viewModel[value] = ko.observable(viewModel[value]);   
        }
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        ko.bindingHandlers.text.update(element, function() { return viewModel[valueAccessor()]; });
    }
};

var viewModel = {
    people: ko.observableArray([
    { PersonId: 33, LastName: 'frank' }        
    ])        
};    
   

ko.applyBindings(viewModel);