在$ document.ready中訪問ViewModels屬性

Question

我有一個像這樣的ViewModel：

    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

        });

我已經在viewModel的作用域之外的javascript函數中查看了這個基因敲除.js訪問viewModel 。

有沒有一種方法可以訪問document.ready中的ViewModels屬性？

Answer 1

如注釋中所述，您試圖在設置視圖模型之前訪問它們的屬性。 我認為實現此目的的更好方法是在viewModel中定義一個加載函數，該函數將返回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.
            }
        });
    }
}

注意，$。ajax返回具有的jquery promise。

在准備好文檔后，您可以連接到返回的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
    });
});

從jQuery 1.5開始，由$ .ajax（）返回的jqXHR對象實現Promise接口https://api.jquery.com/jQuery.ajax/