Attempts to implement SignalR with knockout ViewModel

Question

I have the following code and it does not seem to call the client and does not update the KnockOutJS overview model with the information. GetOuting () is called when the page loads, and the correct information is passed to the viewmodel. Chrome does not show JS errors in developer tools. From now on, it’s hard for me to figure out how to fix them. Any help is appreciated. SignalR Hub

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); } } 

ViewModel

 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> 

With further debugging, it appears in the lines

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

It looks like I am getting an exception from "undefined_method" when it tries to set the ID. Does that make sense to anyone else?

Answer 1

You are right where the problem is. When the server calls the updateOuting method and runs the code:

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

he does not know where to look for the identifier, OutingName and OutingNumber. You must specify that they exist in the view model object. One solution that solves your problem would be to change the javascript code to the following:

 <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> 

Hope this helps!