Cố gắng gợi ý SignalR với Knockout ViewModel

Question

Tôi có mã sau và có vẻ như không gọi điện cho khách hàng và cập nhật chế độ xem KnockOutJS với thông tin. GetOuting() được gọi khi tải trang và thông tin chính xác được đưa vào viewmodel. Chrome không hiển thị lỗi JS trong công cụ dành cho nhà phát triển. Từ thời điểm đó, tôi gặp khó khăn trong việc tìm ra cách khắc phục sự cố. Bất kỳ trợ giúp được đánh giá cao. 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> 

Khi gỡ rối hơn nữa nó dường như là trong các dòng

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

Nó loo ks như tôi đang nhận được một ngoại lệ của "undefined_method" khi nó cố gắng để thiết lập ID. Điều đó có hợp lý với bất kỳ ai khác không?

Answer 1

Bạn đang chính xác ở nơi xảy ra sự cố. Khi máy chủ gọi phương thức updateOuting và bạn chạy mã:

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

nó không biết tìm ID, OutingName và OutingNumber ở đâu. Bạn cần xác định rằng chúng tồn tại trên đối tượng mô hình khung nhìn. Một giải pháp giúp giải quyết vấn đề của bạn là thay đổi mã javascript thành các mục sau:

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

Hy vọng điều đó sẽ hữu ích!