Question

我有以下脚本（见下文）。我有两个问题：

1.以下行在Knockoutjs的上下文中意味着什么？

ko.observable(null);

2.如何调用尚未定义的函数：

that.activePollingXhr(...

以下是完整的脚本：

$(document).ready(function() {

    function ChatViewModel() {

        var that = this;

        that.userName = ko.observable('');
        that.chatContent = ko.observable('');
        that.message = ko.observable('');
        that.messageIndex = ko.observable(0);
        that.activePollingXhr = ko.observable(null);


        var keepPolling = false;

        that.joinChat = function() {
            if (that.userName().trim() != '') {
                keepPolling = true;
                pollForMessages();
            }
        }

        function pollForMessages() {
            if (!keepPolling) {
                return;
            }
            var form = $("#joinChatForm");


            that.activePollingXhr($.ajax({url: form.attr("action"), type: "GET", data: form.serialize(), cache: false,
                success: function(messages) {
                    console.log(messages);
                    for (var i = 0; i < messages.length; i++) {
                        that.chatContent(that.chatContent() + messages[i] + "\n");
                        that.messageIndex(that.messageIndex() + 1);
                    }
                },
                error: function(xhr) {
                    if (xhr.statusText != "abort" && xhr.status != 503) {
                        resetUI();
                        console.error("Unable to retrieve chat messages. Chat ended.");
                    }
                },
                complete: pollForMessages
            }));
            $('#message').focus();
        }

        that.postMessage = function() {
            if (that.message().trim() != '') {
                var form = $("#postMessageForm");
                $.ajax({url: form.attr("action"), type: "POST",
                    data: "message=[" + that.userName() + "] " + $("#postMessageForm input[name=message]").val(),
                    error: function(xhr) {
                        console.error("Error posting chat message: status=" + xhr.status + ", statusText=" + xhr.statusText);
                    }
                });
                that.message('');
            }
        }

        that.leaveChat = function() {
            that.activePollingXhr(null);
            resetUI();
            this.userName('');
        }

        function resetUI() {
            keepPolling = false;
            that.activePollingXhr(null);
            that.message('');
            that.messageIndex(0);
            that.chatContent('');
        }

    }

    //Activate knockout.js
    ko.applyBindings(new ChatViewModel());

});

Answer 1

只是用null作为初始值初始化一个observable。

如果需要调用一个可观察的函数，只需添加第二组括号。

that.activePollingXhr()()

Answer 2

ko.observable(null);创建一个值为null的observable。与ko.observable(5);没有什么不同，其中值为5。

我看到你通过传递ajax调用的结果来使用that.activePollingXhr observable。但是，此调用是异步的，$.ajax不返回从服务器获取的数据，而是返回延迟的jquery。您需要that.activePollingXhr使用success回调。以下是您的代码的外观：

$.ajax({url: form.attr("action"), type: "GET", data: form.serialize(), cache: false,
    success: function(messages) {
        console.log(messages);
        for (var i = 0; i < messages.length; i++) {
            that.chatContent(that.chatContent() + messages[i] + "\n");
            that.messageIndex(that.messageIndex() + 1);
        }
        that.activePollingXhr(messages); // <-- Note where the call to activePollingXhr is
    },
    error: function(xhr) {
        if (xhr.statusText != "abort" && xhr.status != 503) {
            resetUI();
            console.error("Unable to retrieve chat messages. Chat ended.");
        }
    },
    complete: pollForMessages
});

至于您提问的评论：that.activePollingXhr定义为that.activePollingXhr = ko.observable(null); - 值为null的观察值。

作为KnockoutJS可观察的函数

2 个答案: