使用 SignalR 连接 Knockout（对象不支持属性或方法）

Question

我在启动我的应用程序时收到以下 js 错误（在标记为 ### 的代码行上）：

JavaScript runtime error: Object doesn't support property or method 'messages'

我以前在没有淘汰赛的情况下进行过这项工作，但我正在尝试添加淘汰赛，因为我觉得从长远来看这将更容易维护。我怀疑这是我第一次涉足 SignalR 和 Knockout，我做了一些非常愚蠢的事情，所以任何指针都请告诉我。 mappedMessages 数据已完全填充，只是在尝试设置 self.messages 时出现问题。淘汰赛 3.0.0，SignalR 1.1.3。

完整的javascript代码如下：

$(function () {

    var messageHub = $.connection.messageHubMini;

    function init() { }


    function Message(data) {
        this.Operator = ko.observable(data.Operator);
        this.text = ko.observable(data.Text);
    }

    function MessagesViewModel() {
        // Data
        var self = this;
        self.messages = ko.observableArray([]); //### message on this line
    }

    // Add a client-side hub method that the server will call
    messageHub.client.updateMessages = function (data) {

        var mappedMessages = $.map(data, function (item) { return new Message(item) });
        self.messages(mappedMessages);
    }

    // Start the connection
    $.connection.hub.start().done(init);

    ko.applyBindings(new MessagesViewModel());
});

谢谢:)

Answer 1

您应该在 SignalR 客户端方法中使用 viewModel 对象。目前，您正在尝试使用名为 self 的变量，但该变量在 SignalR 客户端方法范围内不可用。我已将您的代码更新为我认为应该可以解决您的问题的版本，并尽可能少地进行更改。

$(function () {

    var messageHub = $.connection.messageHubMini;

    function init() { }


    function Message(data) {
        this.Operator = ko.observable(data.Operator);
        this.text = ko.observable(data.Text);
    }

    function MessagesViewModel() {
        // Data
        var self = this;
        self.messages = ko.observableArray([]); //### message on this line
    }

    var viewModel = new MessagesViewModel();

    // Add a client-side hub method that the server will call
    messageHub.client.updateMessages = function (data) {

        var mappedMessages = $.map(data, function (item) { return new Message(item) });
        viewModel.messages(mappedMessages);
    }

    // Start the connection
    $.connection.hub.start().done(init);

    ko.applyBindings(viewModel);
});