Knockout afterRender differences between v3.0 and previous

by robatwilliams

HTML

<div data-bind="foreach: { data: shapes, afterRender: afterRender.bind($data) }">
    <!-- ko if: type === 'square' -->
        <div class="shape square"></div>
    <!-- /ko -->
    
    <!-- ko if: type !== 'square' -->
        <div class="shape circle"></div>
    <!-- /ko -->
</div>

<div data-bind="foreach: logMessages">
    <div data-bind="text: $data"></div>
</div>

CSS

.shape {
    width: 50px;
    height: 50px;    
    margin: 10px;
    display: inline-block;
}

.square {
    background-color: red;
}

.circle {
    background-color: blue;
    border-radius: 25px;
}

JavaScript

var viewModel = {
    shapes: [
        { type: 'square' },
        { type: 'circle' },
        { type: 'square' },
        { type: 'circle' }
    ],
    logMessages: ko.observableArray(),
    afterRender: function (nodes, data) {
        var elements, message;
        
        elements = ko.utils.arrayFilter(nodes, function (node) {
            return node.nodeType === Node.ELEMENT_NODE;
        });
        
        message = 'Inserted ' + elements.length + ' elements for ' + data.type;
        
        this.logMessages.push(message);
    }
};

ko.applyBindings(viewModel);