Signalr股票样本操纵

Question

我已经下载了SignalR Sample并进行了测试。它像一个魅力。出于测试目的，我创建了一个使用单页模板的新mvc 4应用程序，并在样本中添加了包含StockTicker.html 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选项卡load事件，而不是文件为此做好准备（因为标签内容后文件准备异步触发加载）。修改你的代码是这样的：

1. 添加某种识别到你的“外汇”选项卡（如<li id="forex"><a href="/Forex">Forex</a></li>）

2. 变化$(function(){//init code here})你的“SignalR.StockTicker.js”到一个函数内部，你可以调用自己（I称之为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(); 
        } 
       } 
   });