手动更新DB时,使用SignalR和Knockout更新UI

Question

我为此搜索了SO,但没有遇到任何明显的问题.我有一个工作仪表板,它们的状态在一天中不断变化,我正在尝试将一些概念证明应用程序放在一起,并通过在数据库中运行更新命令来手动触发更新.这就是我设置的,但是当我执行更新时,我看不到UI的任何变化,你能看到我哪里出错吗？

毂:

public class DashboardHub : Hub
{
    private readonly Repository _repository;

    public DashboardHub()
    {
        _repository= new Repository();
    }

    public void GetJobs()
     {
         var jobs =  _repository.GetJobs();

        Clients.All.allJobsRetrieved(jobs);
     }
}

淘汰视图模型

$(function () {
    $(function () {
        function jobViewModel(id, name, isPaused, currentStatus, cob, owner) {
            this.hub = $.connection.dashboardHub;

            //job variables, initialised from params
            this.Id = id;
            this.Name = ko.observable(name);
            this.IsPaused = ko.observable(isPaused);
            this.CurrentStatus = ko.observable(currentStatus);
            this.Cob = ko.observable(cob);
        }

        function dashboardViewModel() {
            this.hub = $.connection.dashboardHub;

            //jobs collection
            this.jobs = ko.observableArray([]);

            //reference to jobs collection
            var jobs = this.jobs;

            //load jobs, calling server side hub method
            this.init = function () {
                this.hub.server.getJobs();
            };

            //callback from server side hub sending jobs to client
            this.hub.client.allJobsRetrieved = function (allJobs) {
                var mappedJobs = $.map(allJobs, function (job) {
                    return new jobViewModel(job.Id, job.Name, job.IsPaused, job.CurrentStatus, job.CoB, self);
                });

                jobs(mappedJobs);
            };

            //callback from server side hub sending error messages to client
            this.hub.client.raiseError = function (error) {
                $("#error").text(error);
            };
        }

        //set up the viewmodel
        var viewModel = new dashboardViewModel();
        ko.applyBindings(viewModel);

        //call to initialise
        $.connection.hub.start(function () {
            viewModel.init();
        });
    });
});

Answer 1

更新我已经提取了我的代码并将其放在Github/nuget https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy

要安装到MVC项目

Install-Package SignalR.EventAggregatorProxy

老答案

我刚刚为我的一个客户项目做了这个,我使用了我为一个名为FreePIE的开源项目创建的EventAggregator

https://github.com/AndersMalmgren/FreePIE/tree/master/FreePIE.Core/Common/Events

快速阅读EventAggregators http://codebetter.com/jeremymiller/2009/07/22/braindump-on-the-event-aggregator-pattern/

存储库代码看起来像这样

public class FooRepository : Repository<Foo> 
{
   private readonly IEventAggregator eventAggregator;

   public FooRepository(IEventAggregator eventAggregator) {
      this.eventAggregator = eventAggregator;
   }

   public void SaveFoo(Foo foo)
   {
      //save foo
      this.eventAggregator.Publish(new FooSavedEvent(foo));
   }
}

在事件聚合器中心(SignalR)我做

public class ClientEventAggregator : Hub
{
   public ClientEventAggregator (IEventAggregatorClientProxy proxy)
   {
      //This is just a way of injecting the singleton proxy for the first hub connection
   }
}

处理EventAggregator触发的所有后端事件的代理.
IHandle<object>可以更改为例如基类,IHandle<ForwardToClientEvent>这样您就可以选择要转发给客户端的后端事件

public class EventAggregatorClientProxy : IEventAggregatorClientProxy, IHandle<object>
{
   public EventAggregatorClientProxy(IEventAggregator eventAggregator) 
   {
      eventAggregator.Subscribe(this);
   }

   public void Handle(object event)
   {
      var context = GlobalHost.ConnectionManager.GetHubContext<ClientEventAggregator>();
      context.Clients.All.event(new { Type = event.GetType().Name, Event = event });
   }
}

在我的示例中,所有事件都将发送给您可以为其实现规则并更改context.Clients.All的所有客户端

在客户端我使用我为另一个SO问题写的这个小事件聚合器重新发布事件http://jsfiddle.net/wJtun/4/

MyApp.MasterViewModel = function() {
    var event = $.connection.clientEventAggregator;

    event.client.event = this.onEvent.bind(this);

    $.connection.hub.start().done();
    });
};
MyApp.MasterViewModel.prototype = {
   onEvent: function(event) {
      var type = MyApp.Events[event.type];          
      MyApp.eventAggregator.publish(new type(event.event));
   }
};

var type = MyApp.Events [event.type]

请注意,这需要您定义了一个javascript类MyApp.Events.FooSavedEvent.或者您动态创建包含可以发布的所有事件的JS(您可以查看SignalR代码如何创建Hub代理).

免责声明:上面的所有代码都直接在SO编辑器中写入内存,它可能包含错误