9

データ バインディングに Knockout.js を使用し、クライアント側 (ハッシュベース) URL のルーティングに Sammy.js を使用する単一ページ アプリケーションがあります。

ただし、Internet Explorer で奇妙な問題が発生しています。リンクをクリックすると、ブラウザのアドレス バーの URL が変更されることがありますが、対応する Sammy ルートは実行されません。

毎回発生するわけではありませんが (ただし、一貫してエラーを再現できます)、IE10 でのみ発生します (Chrome は毎回正常に動作します)。ハードコーディングされた一連のリンクでは同じ問題が発生しないため、Knockout にも関連しているようです。

説明のために、問題を再現するために必要最小限のものを除いてすべてを取り除き、2 つの jsbin の例を作成しました。

例 1 (ノックアウトあり): http://jsbin.com/aretis/2/

問題を確認するには、上記のリンクを開き、[Record #1]、[Baz]、[Record #1] の順にクリックします。レコード 1 の URL はアドレス バーに表示されますが、そのレコードのルートはリストに追加されません。

例 2 (ノックアウトなし): http://jsbin.com/amivoq/1/

この例では、データ バインドされたリストではなく、レコード リンクの静的リストがあります。いずれかのリンクをクリックすると (任意の順序で)、そのルートがリストに追加されます (当然のことです)。

問題を再現するには、これらを IE で実行する必要があることに注意してください。

何か案は？

4

1 に答える 1

2

上記の私のコメントによると、window.hashchange イベントをキャッチして URL を自分で解析するだけで、この問題を回避しました。これは、私が実際に使用していた Sammy.js の唯一の部分であり、実際の問題を突き止めることができませんでした。うまくいけば、これは他の誰かを助けるでしょう。

最初に行ったのは、hashchange イベントのバインドです。

$(function () {
    $(window).on("hashchange", HandleUrl);

    // Call our URL handler to deal with any initial URL given to us.
    HandleUrl();
}

これにより、次の URL パーサーが呼び出されます。

function HandleUrl() {
    var hash = location.hash;

    if (hash.indexOf("#Account") >= 0) {
        var splitParts = hash.split("/");

        if (splitParts.length >= 2) {
            ShowLoadingBox();
            ShowAccountDetailFromId(splitParts[1]);
        }
    } else if (hash.indexOf("#Contact") >= 0) {
        var splitParts = hash.split("/");

        if (splitParts.length >= 2) {
            ShowLoadingBox();
            ShowContactDetailFromId(splitParts[1]);
        }
    } else if (hash.indexOf("#ThingsToDo") >= 0) {
        SwitchToPanel("navPanelThingsToDo");
    } else if (hash.indexOf("#ThingsIveDone") >= 0) {
        SwitchToPanel("navPanelThingsIveDone");
    } else if (hash.indexOf("#Reports") >= 0) {
        SwitchToPanel("navPanelReports");
    } else {
        SwitchToPanel("navPanelMyAccounts");
    }
}

のような関数はShowAccountDetailFromId()、SwitchToPanel()(Web サービスへの Ajax 呼び出しを使用して) 適切な<div>. これはおそらく完全にナイーブなアプローチですが、機能しています (つまり、URL をブックマークしたり、戻るボタンやブラウザーの履歴が機能したりできます)。

于 2013-10-03T16:43:57.040 に答える