Образец манипуляции с контрольным сигналом Signalr

Question

Я скачал SignalR Sample и протестировал его. Отлично работает. В целях тестирования я создал новое приложение mvc 4 с использованием шаблона одной страницы и добавил частичный вид, содержащий html StockTicker.html в образце. Я загружаю это частичное представление динамически как одну из вкладок вкладок jquery ui. Я также добавил другие необходимые файлы.

Когда я отлаживаю приложение, я вижу, что нижеприведенный скрипт, который можно найти в файле SignalR.StockTicker.js, работает до загрузки представления.

$.connection.hub.start() 
    .pipe(init) 
    .pipe(function() { 
     return ticker.server.getMarketState(); 
    }) 
    .done(function (state) { 
     if (state === 'Open') { 
      ticker.client.marketOpened(); 
     } else { 
      ticker.client.marketClosed(); 
     } 

     // Wire up the buttons 
     $("#open").click(function() { 
      ticker.server.openMarket(); 
     }); 

     $("#close").click(function() { 
      ticker.server.closeMarket(); 
     }); 

     $("#reset").click(function() { 
      ticker.server.reset(); 
     }); 
    }); 

Таким образом, функция init не может выполнять манипуляции с dom, что она должна делать.

function init() { 
    return ticker.server.getAllStocks().done(function (stocks) { 
     $stockTableBody.empty(); 
     $stockTickerUl.empty(); 
     $.each(stocks, function() { 
      var stock = formatStock(this); 
      $stockTableBody.append(rowTemplate.supplant(stock)); 
      $stockTickerUl.append(liTemplate.supplant(stock)); 
     }); 
    }); 
} 

Что мне нужно сделать, чтобы мой код работал правильно? Here вы можете найти мой тестовый проект.

Спасибо заранее,

Answer 1

Вы должны использовать JQuery UI Tabs' load события вместо документа готов для этого (поскольку содержимое вкладки загружаются асинхронно после документов, готовых пожаров). Измените код следующим образом:

1. Добавить какой-то идентификации на вкладке «Forex» (как <li id="forex"><a href="/Forex">Forex</a></li>)

2. Изменить $(function(){//init code here}) внутри ваших «SignalR.StockTicker.js» к функции, которые вы можете назвать себя (я назвал его initStockTicker):

   $(function() { 
       var ticker = $.connection.stockTicker, // the generated client-side hub proxy 
       ... 
   }); 
   

   =>

   function initStockTicker() { 
       var ticker = $.connection.stockTicker, // the generated client-side hub proxy 
       ... 
   } 
   

3. Добавить load обработчик вашей инициализации вкладки:

   $("#marketWatchTabs").tabs({ 
       load: function (event, ui) { 
        if (ui.tab.is("#forex")) { 
         initStockTicker(); 
        } 
       } 
   });