Accessing ViewModels properties within $document.ready

Question

I have a ViewModel like this:

    function FooViewModel() {
            var self = this;
            self.prevPage = ko.observable();
            self.nextPage = ko.observable();
            self.totalItems = ko.observable();
            self.totalPages = ko.observable();
            $.ajax({
                type: 'GET',
                url: 'http://localhost:xxxx/api/',
                datatype: 'json',
                success: function (data) {
                    // 
                },
                error: function (err){
                    //
                },
                complete: function(request){
                    //Pagination information in the responseheader.
                    pagingheader = request.getResponseHeader('X-Pagination');
                    var json = JSON.parse(pagingheader);
                    self.prevPage(json["PrevPageLink"]);
                    self.nextPage(json["NextPageLink"]);
                    self.totalItems(json["TotalCount"]);
                    self.totalPages(json["TotalPages"]);
                    console.log(self.totalPages()) // Writes the correct number.
                }
            });
        }
var vm;
$(document).ready(function () {
            vm = new FooViewModel();
            ko.applyBindings(vm);
            // Here I want to access the different properties of the ViewModel.
            console.log(typeof vm.totalPages) // writes function
            console.log(typeof vm.totalPages()) //writes undefined
            console.log(vm.totalPages()); // Writes undefined

        });

I've looked at this knockout.js access viewModel in javascript function outside viewModel's scope.

Is there a way I can access the ViewModels properties in document.ready ?

Answer 1

You are trying to access properties of your view model before they were set, as was mentioned in the comments. I think the better way to implement this is to define a load function in your viewModel which will return promise.

function FooViewModel() {
    var self = this;
    self.prevPage = ko.observable();
    self.nextPage = ko.observable();
    self.totalItems = ko.observable();
    self.totalPages = ko.observable();
    self.load = function() {
        return $.ajax({
            type: 'GET',
            url: 'http://localhost:xxxx/api/',
            datatype: 'json',
            success: function (data) {
                // 
            },
            error: function (err){
                //
            },
            complete: function(request){
                //Pagination information in the responseheader.
                pagingheader = request.getResponseHeader('X-Pagination');
                var json = JSON.parse(pagingheader);
                self.prevPage(json["PrevPageLink"]);
                self.nextPage(json["NextPageLink"]);
                self.totalItems(json["TotalCount"]);
                self.totalPages(json["TotalPages"]);
                console.log(self.totalPages()) // Writes the correct number.
            }
        });
    }
}

Notice that $.ajax returns jquery promise that has.

And in your document ready, you can hook up to the done handler of the returned promise.

var vm;
$(document).ready(function () {
    vm = new FooViewModel();
    vm.load().done(function() {
        ko.applyBindings(vm);
        console.log(typeof vm.totalPages) // writes function
        console.log(typeof vm.totalPages()) //writes undefined
        console.log(vm.totalPages()); // Writes undefined
    });
});

The jqXHR objects returned by $.ajax() as of jQuery 1.5 implement the Promise interface https://api.jquery.com/jQuery.ajax/