Knockout Memory Leak (2.1)

by balefrost

HTML

Knockout 2.1

<button id="start">Start</button>

<div>Start of foos</div>
<div data-bind="template: { name: templateName, foreach: rows }"></div>
<div>End of foos</div>

<script type="text/html" id="rowa">
    <!-- ko if: (value < 500) -->
        <div data-bind="attr: { 'data-value': value }">
            <div data-bind="text: ('%%' + value)"></div>
        </div>
    <!-- /ko -->
    <!-- ko if: (value >= 500) -->
    <div data-bind="text: ('??' + value)"></div>
    <!-- /ko -->
</script>

<script type="text/html" id="rowb">
    <div data-bind="text: ('!!' + value)"></div>
</script>

JavaScript

var viewModel = {
    rows: ko.observableArray([]),
    templateName: function() { return Math.random() < 0.5 ? "rowa" : "rowb"; }
};

var startButton = document.getElementById("start");

function updateData() {
    var numberOfEntries = 500;
    var data = [];
    for (var i = 0; i < numberOfEntries; ++i) {
        data.push({
            value: Math.random() * 1000
        });
    }
    viewModel.rows(data);
}

ko.applyBindings(viewModel, document.body);

startButton.addEventListener("click", function() {
    setInterval(updateData, 500);
    startButton.remove();
});