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?

Kev - nice post. I'm still a little confused by it. New to knockout. I am having similar trouble simply loading a ViewModel with AJAX data on page load. I'm sure i'm missing a tiny but serious point. one thing that confuses me is some tutorials show `viewmodel` as an object (ex. `var viewmodel = { something: ko.observable() }`) and others as a function (ex. `function ViewModel() { this.something = ko.observable() }`) - any suggestions? — one.beat.consumer, Mar 16 '12 at 00:43
@one.beat.consumer - see my follow-up question: http://stackoverflow.com/questions/9589419/difference-between-knockout-view-models-declared-as-object-literals-vs-functions - the answer and the comments below should make things clearer. I'd recommend spending $25 and watching this: http://www.pluralsight-training.net/microsoft/Courses/TableOfContents?courseName=knockout-mvvm — Kev, Mar 16 '12 at 02:30
I'll check out your other question; thank you. I have a pluralsight subscription and I have watched it 2-3 times... they barely scratch the surface and much of it is old now that 2.0 is out, they were using 1.2 or 1.3 beta... — one.beat.consumer, Mar 16 '12 at 05:48

score 10 · Accepted Answer · edited Jun 05 '13 at 09:38

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.

How would this work if say I had no data, and I need to call a Ajax method and its a GET? — Vyache, Feb 03 '14 at 16:07
Simply change the getAttachments call to make the AJAX call, and in the callback set the results directly into the attachments observable array. Refresh would just call self.getAttachments(). attachments would be initialized empty, and then you could immediately call self.getAttachments() to make the first AJAX call. Once the callback sets the results Knockout will take care of refreshing your UI. — John Earles, Feb 04 '14 at 13:12
Hmm, for some reason I can't refresh my data with this method, see my question: http://stackoverflow.com/questions/21558075/how-do-i-update-my-model-using-ajax-and-mapping-plugin — Vyache, Feb 04 '14 at 16:39

Refreshing list after ajax call with Knockout JS

1 Answers1