Ajax requests are not made on page load when using KnockoutJS
===

I am new to the whole front-end client scripting scene and have encountered a few difficulties when working on my most recent project.  I have looked around the website and could not find anything that answered my question.  There may be something here and I have just not found it because of my inexperience and if there is it would be nice if you can provide a link to those resources.

I am currently working on building a client that makes ajax calls to a cross-domain asp.net web api that I have built.  I know that the web api works as it has been tested in fiddler.  I have also managed to successfully make calls on a click event.

The problem is that I cannot seem to get this working on page load and with knockoutjs.  I have tried to do a simple list that is populated with data when the page loads but when I load the page and check fiddler I can see that the ajax calls are not being made.  This possibly explains why when I load the page the content isn't there.  I have tried inserting some static data to view model and the binding worked so it seems it may be the case that there is something blocking the ajax calls.

I have looked at examples and have knocked up some code.  I cannot see any problems with the code but as I am inexperienced there is certainly a possibility that I am missing something.  There may also be more efficient ways to do model binding, if so, I would appreciate any advice from someone more experienced.

The code is:

    function PlacesViewModel() {
            var self = this;

            function Place(root, id, title, description, url, pub) {
                var self = this;

                self.id = id;
                self.title = ko.observable(title);
                self.description = ko.observable(description);
                self.url = ko.observable(url);
                self.pub = ko.observable(pub);

                self.remove = function () {
                    root.sendDelete(self);
                };

                self.update = function (title, description, url, pub) {
                    self.title(title);
                    self.description(description);
                    self.url(url);
                    self.pub(pub);
                };

            };

            self.places = ko.observableArray();

            self.add = function (id, title, description, url, pub) {
                self.places.push(new Place(self, id, title, description, url, pub));
            };

            self.remove = function (id) {
                self.places.remove(function (place) { return place.id === id; });
            };

            self.update = function (id, title, description, url, pub) {
                var oldItem = ko.utils.arrayFirst(self.places(), function (i) { return i.id === id; });
                if (oldItem) {
                    oldItem.update(title, description, url, pub);
                }
            };



            self.sendDelete = function (place) {
                $.ajax({
                    url: "http://localhost:1357/api/places" + place.id,
                    type: "DELETE"
                });
            }
        };

        $(function () {
            var viewModel = new PlacesViewModel();

            ko.applyBindings(viewModel);
            $JQuery.support.cors = true;
            $.get("http://localhost:1357/api/places", function (places) {
                $.each(places, function (idx, place) {
                    viewModel.add(place.PlaceID, place.Title, place.Description, place.URL, place.Public);
                });
            }, "json");
        });

It has been simplified for the sake of getting it to work before I add more functionality.
  
Thanks for your time.