试图用 Knockout ViewModel 来暗示 SignalR

Question

我有以下代码，它似乎没有调用客户端并使用信息更新 KnockOutJS 视图模型。 GetOuting() 在页面加载时被调用，并且正确的信息被输入到视图模型中。 Chrome 在开发者工具中没有显示 JS 错误。从那时起，我无法弄清楚如何对其进行故障排除。任何帮助表示赞赏。 SignalR 集线器

public class Outings : Hub
{
    private static Dictionary<Guid, OutingViewModel> outings = new Dictionary<Guid, OutingViewModel>();

    public void GetOuting(string id)
    {
        var guidID = new Guid(id);
        bool containsOuting = outings.ContainsKey(guidID);
        if (!containsOuting)
        {
            var outingAccessor = new OutingAccessor();
            outingAccessor.ID = guidID;
            outingAccessor.Load();
            var outingVM = new OutingViewModel(outingAccessor);
            outings.Add(guidID, outingVM);
        }
        var outing = outings[guidID];
        this.Clients.updateOuting(outing);
    }

    public void SaveOuting(string outingNumber, OutingViewModel outing)
    {
        var guidID = new Guid(outingNumber);
        outings[guidID] = outing;
        this.Clients.updateOuting(outing);
    }
}

视图模型

public class OutingViewModel
{
    public OutingViewModel(OutingAccessor outingAccessor)
    {
        ID = outingAccessor.ID;
        OutingNumber = outingAccessor.OutingNumber;
        var outingGeneralAccessor = new OutingGeneralAccessor();
        var outingGeneral = outingGeneralAccessor.GetOutingGeneralByOutingID(outingAccessor.ID);
        this.OutingName = outingGeneral.Name;
    }
    public Guid ID { get; set; }
    public int OutingNumber { get; set; }
    public string OutingName { get; set; }
}

HTML + JavaScript

@model string
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"> </script>
<script src="@this.Url.Content("~/Scripts/jquery.signalR.js")" type="text/javascript">     </script>
<script src="@this.Url.Content("~/Scripts/knockout.js")" type="text/javascript"> </script>
<script type="text/javascript" src="/signalr/hubs"> </script>
<script type="text/javascript">
    $(function() {
        function outingDataViewModel() {
            this.hub = $.connection.outings;
            this.ID = ko.observable();
            this.OutingNumber = ko.observable();
            this.OutingName = ko.observable();
            //Initializes the view model
            this.init = function() {
                this.hub.getOuting('@this.Model');
            };
            this.hub.updateOuting = function(data) {
                ID(data.ID);
                OutingName(data.OutingName);
                OutingNumber(data.OutingNumber);
            };
        }
        var vm = new outingDataViewModel();
        ko.applyBindings(vm);
        // Start the connection
        $.connection.hub.start(function() { vm.init(); });
    });
</script>
<h1>Outing Number</h1>
<div id="OutingSummary">
    <div data-bind="text:OutingNumber"></div>
    <div data-bind="text:OutingName"></div>
</div>

经过进一步调试，它似乎在行中

ID(data.ID);
OutingName(data.OutingName);
OutingNumber(data.OutingNumber);

当它尝试设置 ID 时，我似乎遇到了“undefined_method”异常。这对其他人有意义吗？

Answer 1

你的问题在哪里是正确的。当服务器调用 updateOuting 方法并运行代码时：

ID(data.ID);
OutingName(data.OutingName);
OutingNumber(data.OutingNumber);

它不知道在哪里查找 ID、OutingName 和 OutingNumber。您需要指定这些存在于视图模型对象上。解决您的问题的一种解决方案是将javascript代码更改为以下内容：

<script type="text/javascript">
    $(function () {
        function outingDataViewModel() {
            var self = this;
            self.hub = $.connection.outings;
            self.ID = ko.observable();
            self.OutingNumber = ko.observable();
            self.OutingName = ko.observable();
            //Initializes the view model
            self.init = function () {
                self.hub.getOuting('@Guid.NewGuid().ToString()');
            };
            self.hub.updateOuting = function (data) {
                self.ID(data.ID);
                self.OutingName(data.OutingName);
                self.OutingNumber(data.OutingNumber);
            };
        }
        var vm = new outingDataViewModel();
        ko.applyBindings(vm);
        // Start the connection
        $.connection.hub.start(function () { vm.init(); });
    });
</script>

希望对你有帮助！