在 $document.ready 中访问 ViewModels 属性答案

【问题标题】：Accessing ViewModels properties within $document.ready在 $document.ready 中访问 ViewModels 属性
【发布时间】：2014-04-23 09:42:15
【问题描述】：

我有一个这样的 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 属性？

【问题讨论】：

如果可以打印totalPages的函数定义，说明已经可以访问viewModel了。但这里的问题是您发出的 ajax 请求尚未完成，值尚未初始化。
谢谢。有没有办法等待ajax请求完成，然后获取值？
当你从它创建一个新对象时，将一个回调函数传递给你的viewModel，并让complete调用那个函数？

标签： javascript jquery knockout.js

【解决方案1】：

您正尝试在设置视图模型之前访问它们的属性，如 cmets.xml 中所述。我认为实现这一点的更好方法是在您的 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 的 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/

【讨论】：