javascript - 使用 SignalR 连接 Knockout(对象不支持属性或方法)

Question

启动应用程序时，我收到以下 js 错误(在标记为 ### 的代码行上):

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

我之前已经在没有 knockout 的情况下进行了这项工作，但我正在尝试添加 knockout ，因为我觉得从长远来看这会更容易维护。我怀疑，由于这是我第一次尝试 SignalR 和 Knockout，我做了一些极其愚蠢的事情，所以任何指示请告诉我。 mappedMessages 数据已完全填充，只是当它尝试设置 self.messages 时出现问题。 knockout 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);
});