title: Ajax queries with Knockout JS
body: <p>I try to display a list of items in a table using Knockout JS. This is like a typical search interface, where the user types a query and the interface displays the list of results returned by the search engine. I first retrieve them from the server through an AJAX call and then try to bind them. This works for the first query very well. But when I try the second query (and subsequent queries), each result item is represented 10 times (duplicated), then for the 3rd query each item is displayed for like 30 times (and so on). Given below is the code.</p>
  
  <pre><code>&lt;body &gt;
  &lt;p&gt;
    &lt;input type="search" id="skynet-query" name="q" placeholder="scientific search" autofocus /&gt;
    &lt;input type="submit" id="skynet-submit" value="Ignite!" onclick="getAttachments(document.getElementById('skynet-query').value)" /&gt;
  &lt;/p&gt;
  &lt;article data-bind="foreach: seats"&gt;   
          &lt;h3&gt;
              &lt;input data-bind="attr:{value: papers().id }" type="checkbox" name="article-to-basket" /&gt;
              &lt;a data-bind="attr:{href: papers().url }, text: papers().title"&gt; &lt;/a&gt;
          &lt;/h3&gt;
          &lt;address class="authors" data-bind="text: papers().authors"/&gt;
  &lt;/article&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Following is the Script part</p>
  
  <pre><code>&lt;script&gt;
  
   var array = new Array();
  
  function getAttachments(keyword) {
  
    var request = $.ajax({
      type: "GET",
      datatype: "json",
      url: "get-papers?q="+keyword+"&amp;format=json&amp;full-articles=true&amp;kw-count=10&amp;article-count=10&amp;task-type=m1"
    });
  
    request.done(function (response) {
  
      for (i=0;i&lt;response.articles.length; i++){
          array[i] = new PaperData(response.articles[i]);
      }
      ko.cleanNode(document);
      ko.applyBindings(new ReservationsViewModel());
      console.log("DONE");
    });
  
  }
  
  function PaperData(papers) {
      var self = this;
      self.papers = ko.observable(papers);
  }
  
  function ReservationsViewModel() {
      //var self = this;
      self.seats = ko.observableArray(array);
  
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Can someone help me to find what's wrong with this code? </p>
  
  <p>This is what my data-model looks like</p>
  
  <pre><code> {
      articles: [
      {
      "is-saved": false,
      title: "title",
      abstract: "Abstract",
      date: "2005-01-01 00:00:00",
      "publication-forum": "forum",
      "publication-forum-type": "article",
      authors: "Authors",
      keywords: "keyword1, keyword2, keywordn",
      id: "4f5a318e573ce53e03000015"
      }
      ]
  
      }
  </code></pre>