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

时间:2013-05-09 10:49:46

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

我为此搜索了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();
        });
    });
});

2 个答案:

答案 0 :(得分:6)

更新我已经提取了我的代码并将其放在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编辑器内部写入内存,可能包含错误

答案 1 :(得分:3)

这是有道理的,应用程序不知道数据库中的数据已经改变。您需要一些触发/通知来通知应用程序查询数据库。

理想情况下,您不会手动/直接更新数据库。您将使用某些服务来查询消耗数据,处理/验证数据,将数据推送到数据库。将通知发送到导入数据的其他系统。 (很多不同的是这样做。)

在这种情况下,您的网站可能会收到导入的通知数据并启动仪表板查询。