Memory Leak

by ZenMaster

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0rc.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.min.js"></script>
<div id="main">
    <span data-bind="text: label"></span>
    <input type="text" data-bind="disable: hasLabel"></span>
    <ul data-bind="foreach: items">
        <li><a href="" data-bind="text: $data"></a></li>
    </ul>
</div>

<button id="button1">Clean up 1</button>
<button id="button2">Clean up 2</button>

JavaScript

var data = {
    label: 'Label',
    items: ['One', 'Two', 'Three']
};

var viewModel = ko.mapping.fromJS(data);

viewModel.hasLabel = ko.computed({
    read: function(value){        
        return (typeof this.label() !== 'undefined');
    },
    disposeWhenNodeIsRemoved: $('#main')[0],
    owner: viewModel
});  

ko.applyBindings(viewModel, $('#main')[0]);

$('#button1').on('click', function() {
    ko.removeNode($('#main')[0]);
    viewModel.hasLabel = null;
    $('#button1').off();
});

$('#button2').on('click', function() {
    ko.removeNode($('#main')[0]);
    viewModel.hasLabel.dispose();
    viewModel.hasLabel = null;
    $('#button2').off();
});