0

SignalR サンプルをダウンロードしてテストしました。それは魅力のように機能します。テスト目的で、単一ページ テンプレートを使用して新しい mvc 4 アプリケーションを作成し、サンプルに StockTicker.html の html を含む部分ビューを追加しました。この部分ビューをjquery uiタブのタブの1つとして動的にロードしています。他の必要なファイルも追加しました。

アプリケーションをデバッグすると、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 タブのloadイベントを使用する必要があります (ドキュメントの準備ができた後、タブのコンテンツが非同期に読み込まれるため)。次のようにコードを変更します。

  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 に答える