Intentando implementar SignalR con Knockout ViewModel

Question

Tengo el siguiente código y parece que no está llamando al cliente y actualizando el modelo de vista KnockOutJS con la información. Se llama al GetOuting() en la carga de la página y se introduce la información correcta en el modelo de vista. Chrome no muestra errores JS en las herramientas de desarrollador. A partir de ese momento, tengo problemas para encontrar la forma de solucionarlo. Cualquier ayuda es apreciada. 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); 
    } 
} 

modelo de vista

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> 

Tras una posterior depuración que parece estar en las líneas

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

Se loo Como me sale una excepción de "undefined_method" cuando intenta establecer ID. ¿Eso tiene sentido para alguien más?

Answer 1

Usted está en lo correcto sobre dónde está el problema. Cuando el servidor llama al método updateOuting y se ejecuta el código:

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

que no sabe dónde buscar la ID, OutingName y OutingNumber. Debe especificar que existen en el objeto de modelo de vista. Una solución que resuelve su problema sería cambiar el código de JavaScript a lo siguiente:

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

Espero que ayude!