Refreshing list after ajax call with Knockout JS

Question

I have a list of attachments on a page which is generated using a jQuery $.ajax call and Knockout JS.

My HTML looks like (this is stripped back):

<tbody data-bind="foreach: attachments">
  <tr>
    <td data-bind="text: Filename" />
  </tr>
</tbody>

I have a function that gets the list of attachments which is returned as a JSON response:

$(function () {
  getFormAttachments();
});

function getAttachments() {
  var request = $.ajax({
    type: "GET",
    datatype: "json",
    url: "/Attachment/GetAttachments"
  });

  request.done(function (response) {
    ko.applyBindings(new vm(response));
  });
}

My view model looks like:

function vm(response) {
  this.attachments = ko.observableArray(response);
};

There is a refresh button that the use can click to refresh this list because over time attachments may have been added/removed:

$(function () {
  $("#refresh").on("click", getAttachments);
});

The initial rendering of the list of attachments is fine, however when I call getAttachments again via the refresh button click the list is added to (in fact each item is duplicated several times).

I've created a jsFiddle to demonstrate this problem here:

http://jsfiddle.net/CpdbJ/137

What am I doing wrong?

Answer 1

Here is a fiddle that fixes your sample. Your biggest issue was that you were calling 'applyBindings' multiple times. In general you will call applyBindings on page load and then the page will interact with the View Model to cause Knockout to refresh portions of your page.

http://jsfiddle.net/CpdbJ/136

html

<table>
    <thead>
        <tr><th>File Name</th></tr>
    </thead>
    <tbody data-bind="foreach: attachments">
      <tr><td data-bind="text: Filename" /></tr>
    </tbody>
</table>
<button data-bind="click: refresh">Refresh</button>

javascript

$(function () {
  var ViewModel = function() {
    var self = this;

    self.count = 0;
    self.getAttachments = function() {
      var data = [{ Filename: "f"+(self.count*2+1)+".doc" },
                  { Filename: "f"+(self.count*2+2)+".doc"}];
      self.count = self.count + 1;
      return data;
    }

    self.attachments = ko.observableArray(self.getAttachments());

    self.refresh = function() {
      self.attachments(self.getAttachments());        
    }
  };

  ko.applyBindings(new ViewModel());
});

--

You may also want to look at the mapping plugin - http://knockoutjs.com/documentation/plugins-mapping.html. It can help you transform JSON into View Models. Additionally it is able to assign a property to be the "key" for an object... this will be used to determine old vs new objects on subsequent mappings.

Here is a fiddle I wrote a while back to demonstrate a similar idea:

http://jsfiddle.net/wgZ59/276

NOTE: I use 'update' as part of my mapping rules, but ONLY so I can log to the console. You would only need to add this if you wanted to customize how the mapping plugin updated objects.