knockout afterrender remove issue

http://stackoverflow.com/questions/10286013/knockoutjs-always-notifies-subscription-even-if-mapping-data-is-the-same

by ryanwfiorini

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<h4>People</h4>
<ul data-bind="foreach: people, afterRender: handleAfterRender">
    <li>
        Name: <span data-bind="text: name"> </span>
        <a href="#" data-bind="click: $parent.removePerson">Remove</a>
    </li>
</ul>
<button data-bind="click: addPerson">Add</button>

JavaScript

function AppViewModel() {
    var self = this;
     
    self.people = ko.observableArray([
        { name: 'Bert' },
        { name: 'Charles' },
        { name: 'Denise' }
    ]);

    self.handleAfterRender = function(elements, data) {
        debugger;
            alert(element);
        };
    
    self.addPerson = function() {
        self.people.push({ name: "New at " + new Date() });
    };
     
    self.removePerson = function() {
        self.people.remove(this);
    }
}
 
ko.applyBindings(new AppViewModel());