Блог

Главная - Вопросы по программированию - Использование Signalr и knockoutjs для оперативной панели мониторинга

Использование Signalr и knockoutjs для оперативной панели мониторинга

#knockout.js #signalr

#knockout.js #signalr

Вопрос:

У меня возникли проблемы с проектом, и я много читал, но у меня все еще возникают проблемы с его объединением.

У меня есть система продажи билетов, которая отправляет XML-уведомления на мой сервер, который обновляет базу данных SQL Server. Я подписываюсь на изменения базы данных и пытаюсь использовать SignalR и knockoutjs, чтобы обновить представление для всех подключенных клиентов.

Основная проблема, с которой я сталкиваюсь, заключается в попытке обновить модель представления, которая содержит таблицу данных о билетах. Я не очень силен в javascript, поэтому мне трудно понять, что именно мне нужно сделать по-другому. Я знаю, что я довольно близок, но мне нужен совет.

Код позади (в отдельном классе от hub)

       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. Я настоятельно рекомендую не сериализовать таблицы данных. Если вам нужно использовать их в серверной части, сопоставьте их с POCO в хабе перед вызовом клиентов

Ответ №1:

Я не знаком с 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);
};
Метки: