尝试使用Knockout ViewModel实现SignalR

时间:2012-02-28 17:43:11

标签: javascript asp.net-mvc-3 knockout.js signalr

我有以下代码,似乎没有调用客户端并使用这些信息更新KnockOutJS视图模型。在页面加载时调用GetOuting(),并将正确的信息输入到viewmodel中。 Chrome在开发人员工具中没有显示JS错误。从那时起,我无法弄清楚如何排除故障。任何帮助表示赞赏。 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);
    }
}

视图模型

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”的异常。这对其他人有意义吗?

1 个答案:

答案 0 :(得分:8)

问题所在,你是对的。当服务器调用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>

希望它有所帮助!