7

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?

Improve this question
3
  • 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? Commented Mar 16, 2012 at 0:43
  • @one.beat.consumer - see my follow-up question: stackoverflow.com/questions/9589419/… - the answer and the comments below should make things clearer. I'd recommend spending $25 and watching this: pluralsight-training.net/microsoft/Courses/… Commented Mar 16, 2012 at 2: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... Commented Mar 16, 2012 at 5:48

1 Answer 1

Reset to default
10

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

How would this work if say I had no data, and I need to call a Ajax method and its a GET?
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.
Hmm, for some reason I can't refresh my data with this method, see my question: stackoverflow.com/questions/21558075/…

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.