Knockout - afterAdd not getting called when inside an 'if' block

https://groups.google.com/d/topic/knockoutjs/lvaR1-rI2gY/discussion

by johnpapa

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.js"></script>
<div data-bind="if: hasItems">
    <h2>Test</h2>
    <ul data-bind="foreach: { data: items, afterAdd: $root.myAfterAdd }">
        <li data-bind="text: name"></li>
    </ul>
</div>
<button data-bind="click: addItem">Add Item</button>

JavaScript

var viewModel = {
    items: ko.observableArray([
        { name: "one" },
        { name: "two" },
        { name: "three" }
        ]),
    myAfterAdd: function(element) {
        if (element.nodeType === 1) {
           alert("myAfterAdd");   
        }
    },
    addItem: function() {
        this.items.push({ name: 'new' });
    }
};

viewModel.hasItems = ko.observable(viewModel.items().length > 0);
viewModel.items.subscribe(function(newValue) {
   viewModel.hasItems(newValue.length > 0); 
}, viewModel);


ko.applyBindings(viewModel);