使用Signalr和knockoutjs作为实时仪表板

时间:2014-06-28 04:22:21

标签: knockout.js signalr

我在项目上遇到了麻烦而且我已经阅读了很多但是我仍然无法将它放在一起。

我有一个票务系统,它向我的服务器发送XML通知,更新SQL Server数据库。我订阅了数据库更改,我正在尝试使用SignalR和knockoutjs来更新所有连接客户端的View。

我遇到的主要问题是尝试更新包含Ticket数据表的视图模型。我对javascript的态度不是很强,所以我很难理解我需要做些什么不同的事情。我知道我很接近但需要一些建议。

代码背后(与集线器分开的类)

      private void BroadcastTableData(DataTable table)
    {
        Clients.All.updateTableData(table);
    }

JS

$(function () {

var hubProxy = $.connection.notif;

function init() {
    hubProxy.server.getAllTickets().done(function (table) {
        $.each(table, function () {
         //I know this should populate the initial table data
        });
    });
}

hubProxy.client.updateTableData = function (listoftickets) {
//this should update the knockoutjs view model which should be an observable array
}

$.connection.hub.start().done(init);
});

最后是标记

             <tbody data-bind="foreach: tickets">
                <tr>
                    <td data-bind="text: Message"></td>
                    <td data-bind="text: Id"></td>
                </tr>
            </tbody>

1 个答案:

答案 0 :(得分:3)

我不熟悉signalr,但您可以将hubproxy放入模型中:

$(function() {
    ko.applyBindings(new ViewModel());
});

var ViewModel = function () {
    var self = this;
    var hubProxy = $.connection.notif;

    self.tickets = ko.observableArray(model.tickets);

    var init = function(){
        hubProxy.server.getAllTickets().done(function (tickets) {
            self.tickets(tickets);
        });
    };

    hubProxy.client.updateTableData = function (tickets) {
        self.tickets(tickets);
    };

    $.connection.hub.start().done(init);
};