充当KnockoutJS可观察对象

Function as a KnockoutJS observable

本文关键字:对象 观察 KnockoutJS 充当      更新时间:2023-09-26

我有以下脚本(见下文(。我有两个问题:

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());
});
  1. CCD_ 1创建具有值CCD_。没有什么不同于ko.observable(5);,其中的值将是5

  2. 我看到您通过向that.activePollingXhr传递ajax调用的结果来使用它。然而,这个调用是异步的,$.ajax不会返回从服务器获得的数据,而是延迟的jquery。您需要在success回调中使用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);
            }
            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被定义为ko.observable(null);0——一个值为null的可观测值。

这只是初始化一个以null为初始值的可观察对象。

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

that.activePollingXhr()()