title: Refreshing list after ajax call with Knockout JS
body: <p>I have a list of attachments on a page which is generated using a jQuery <code>$.ajax</code> call and Knockout JS.</p>
  
  <p>My HTML looks like (this is stripped back):</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;tbody data-bind="foreach: attachments"&gt;
    &lt;tr&gt;
      &lt;td data-bind="text: Filename" /&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>I have a function that gets the list of attachments which is returned as a JSON response:</p>
  
  <pre class="lang-js prettyprint-override"><code>$(function () {
    getFormAttachments();
  });
  
  function getAttachments() {
    var request = $.ajax({
      type: "GET",
      datatype: "json",
      url: "/Attachment/GetAttachments"
    });
  
    request.done(function (response) {
      ko.applyBindings(new vm(response));
    });
  }
  </code></pre>
  
  <p>My view model looks like:</p>
  
  <pre class="lang-js prettyprint-override"><code>function vm(response) {
    this.attachments = ko.observableArray(response);
  };
  </code></pre>
  
  <p>There is a refresh button that the use can click to refresh this list because over time attachments may have been added/removed:</p>
  
  <pre class="lang-js prettyprint-override"><code>$(function () {
    $("#refresh").on("click", getAttachments);
  });
  </code></pre>
  
  <p>The initial rendering of the list of attachments is fine, however when I call <code>getAttachments</code> again via the refresh button click the list is added to (in fact each item is duplicated several times).</p>
  
  <p>I've created a jsFiddle to demonstrate this problem here:</p>
  
  <blockquote>
    <p><a href="http://jsfiddle.net/CpdbJ/137" rel="nofollow">http://jsfiddle.net/CpdbJ/137</a></p>
  </blockquote>
  
  <p>What am I doing wrong?</p>