Essayer d'implémenter Signalr avec KO ViewModel

Question

J'ai le code suivant et il semble ne pas appeler le client et mettre à jour le knockoutjs ViewModel avec les informations. Le getOut () est appelé sur le chargement de la page et les informations correctes sont introduites dans le ViewModel. Chrome ne montre aucune erreur JS dans les outils du développeur. À partir de ce moment, j'ai du mal à comprendre comment le dépanner. Toute aide est appréciée. 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>

Lors du débogage supplémentaire, il semble être dans les lignes

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

Il semble que j'obtienne une exception de "undefined_method" lorsqu'il essaie de définir l'ID. Cela a-t-il du sens pour quelqu'un d'autre?

Answer 1

Vous avez raison dans l'endroit où se trouve le problème. Lorsque le serveur appelle la méthode de mise à jour et que vous exécutez le code:

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

Il ne sait pas où chercher ID, OutingName et OutingNumber. Vous devez spécifier que ceux-ci existent sur l'objet du modèle de vue. Une solution qui résout votre problème serait de modifier le code JavaScript en ce qui suit:

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

J'espère que cela aide!