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="target">
    <div>
        <ul data-bind="foreach: tabs">
            <li data-bind="isActive: $root.active, isDisabled: disabled">
                <a data-bind="text: name, attr: { href: '#' + id }"></a>
            </li>
        </ul>
        <div data-bind="foreach: tabs">
            <div data-bind="isActive: $root.active">
                <!-- ko text: name --><!-- /ko -->
            </div>
        </div>
    </div>
</div>

<button>Remove</button>

JavaScript

var data = {
    active: 'editor',
    tabs: [
        {id: 'editor', name: 'HTML Editor', disabled: false},
        {id: 'structure', name: 'HTML Structure', disabled: true},
        {id: 'preview', name: 'Preview', disabled: false}
    ]
};

var viewModel = ko.mapping.toJS(data, {
    tabs: {
        key: function(data) {
            return ko.utils.unwrapObservable(data.id);
        }
    }
}, this);

var $target = $('#target');

ko.applyBindings(viewModel, $target[0]);

// fires once and removed, to avoid any possible references
$('button').one('click', function() {
    ko.removeNode($target[0]);
    //viewModel = null;    
});