0

我已经下载了 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));
        });
    });
}

我必须做什么才能使我的代码正常工作？在这里你可以找到我的测试项目。

提前致谢，

4

1 回答 1

1

您需要为此使用 jQuery UI Tabs 的加载事件而不是文档就绪（因为在文档就绪触发后，选项卡内容是异步加载的）。像这样修改你的代码：

  1. 在您的“外汇”选项卡中添加某种标识（例如<li id="forex"><a href="/Forex">Forex</a></li>）

  2. 将您的“SignalR.StockTicker.js”内部更改$(function(){//init code here})为您可以自己调用的函数（我称之为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();
        }
    }
});
于 2013-04-11T12:23:48.037 回答