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

        });

我看过这个knockout.js access viewModel in javascript function outside viewModel's scope。

有没有办法可以访问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的done处理程序。

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/

访问$ document.ready中的ViewModels属性

1 个答案: