javascript - 用作 KnockoutJS 可观察对象

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

1. ko.observable(null);创建一个值为 null 的可观察对象.与 ko.observable(5); 没什么不同，其中的值为 5 .

2. 我看到您正在使用 that.activePollingXhr通过将 ajax 调用的结果传递给它可以观察到。但是，此调用是异步的并且 $.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 的可观察值.