title: How should I be cleaning up KnockoutJS ViewModels?
body: <p>I have a single-page app where the user pages through lists of items. Each item, in turn, has a list of items.</p>
  
  <p>An observable array is updated with new items from the server retrieved via an AJAX request. This all works fine.</p>
  
  <p>Unfortunately after a few pages, the number of operations performed (and the amount of memory used in browsers like FireFox and IE8) keeps going up. I've tracked it down to the fact that elements in my observable array are not being cleaned up properly and are actually still in memory, even though I've replaced the items in my observable array with new data.</p>
  
  <p>I've created a <a href="http://jsfiddle.net/gWVDu/6/" rel="noreferrer">small example</a> that replicates the problem I'm seeing:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;p data-bind="text: timesComputed"&gt;&lt;/p&gt;
  &lt;button data-bind="click: more"&gt;MORE&lt;/button&gt;
  &lt;ul data-bind="template: { name: 'items-template', foreach: items }"&gt;
  &lt;/ul&gt;
  
  &lt;script id="items-template"&gt;
      &lt;li&gt;
          &lt;p data-bind="text: text"&gt;&lt;/p&gt;
          &lt;ul data-bind="template: { name: 'subitems-template', foreach: subItems }"&gt;&lt;/ul&gt;
      &lt;/li&gt;
  &lt;/script&gt;
  
  &lt;script id="subitems-template"&gt;
      &lt;li&gt;
          &lt;p data-bind="text: text"&gt;&lt;/p&gt;
      &lt;/li&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>JavaScript/KnockoutJS ViewModels:</strong></p>
  
  <pre><code>var subItemIndex = 0;
  
  $("#clear").on("click", function () {
    $("#log").empty();
  });
  
  function log(msg) {
    $("#log").text(function (_, current) {
      return current + "\n" + msg;
    });
  }
  function Item(num, root) {
    var idx = 0;
  
    this.text = ko.observable("Item " + num);
    this.subItems = ko.observableArray([]);
    this.addSubItem = function () {
      this.subItems.push(new SubItem(++subItemIndex, root));
    }.bind(this);
  
    this.addSubItem();
    this.addSubItem();
    this.addSubItem();
  }
  
  function SubItem(num, root) {
    this.text = ko.observable("SubItem " + num);
    this.computed = ko.computed(function () {
      log("computing for " + this.text());
      return root.text();
    }, this);
  
    this.computed.subscribe(function () {
      root.timesComputed(root.timesComputed() + 1);
    }, this);
  }
  
  function Root() {
    var i = 0;
  
    this.items = ko.observableArray([]);
    this.addItem = function () {
      this.items.push(new Item(++i, this));
    }.bind(this);
  
    this.text = ko.observable("More clicked: ");
    this.timesComputed = ko.observable(0);
  
    this.more = function () {
      this.items.removeAll();
      this.addItem();
      this.addItem();
      this.addItem();    
      this.timesComputed(0);
      this.text("More clicked " + i);
    }.bind(this);
  
    this.more();
  }
  
  var vm = new Root();
  
  ko.applyBindings(vm);
  </code></pre>
  
  <p><a href="http://jsfiddle.net/gWVDu/6/" rel="noreferrer">If you look at the fiddle</a>, you will notice that the "log" contains an entry for <em>every single ViewModel ever created</em>. the computed property <code>SubItem.computed</code> is run even after I expected each of those items to be long gone. This is causing a serious degradation in performance in my application.</p>
  
  <p><strong>So my questions are</strong>: </p>
  
  <ul>
  <li>What am I doing wrong here? Am I expecting KnockoutJS to dispose of ViewModels that I actually need to be disposing of manually? </li>
  <li>Is my use of <code>ko.computed</code> on <code>SubItem</code> causing the issue?</li>
  <li>If KnockoutJS is not going to dispose of these viewmodels, how should I be disposing of them myself?</li>
  </ul>
  
  <p><strong>Update:</strong> After some further digging, I'm pretty sure the computed property in <code>SubItem</code> is the culprit. However, I still don't understand why that property is still being evaluated. Shouldn't <code>SubItem</code> be destroyed when the observable array is updated? </p>