Question

我有一个单页面应用程序，它使用Knockout.js进行数据绑定，使用Sammy.js进行客户端（基于哈希）的URL路由。

我在Internet Explorer中看到一个奇怪的问题，但是：有时链接在点击时会更改浏览器地址栏中的URL，但相应的Sammy路由不会执行。

每次都不会发生（但我可以始终如一地重现错误），而且只在IE10中发生（Chrome每次都能正常工作）。它似乎与Knockout有关，因为一组硬编码链接不会出现同样的问题。

为了说明，我已经删除了除了最低限度以外的所有内容以重新创建问题并创建了两个jsbin示例：

示例1（使用Knockout）： http://jsbin.com/aretis/2/

要查看问题，请打开上面的链接并单击“记录＃1”，然后单击“Baz”，然后再单击“记录＃1”。记录1的URL将显示在地址栏中，但该记录的路径不会附加到列表中。

示例2（没有淘汰赛）： http://jsbin.com/amivoq/1/

在这个例子中，我有一个记录链接的静态列表，而不是数据绑定列表。单击任何链接（按任意顺序）将导致该路由被附加到列表中（应该如此）。

提醒一下，必须在IE中运行这些才能重现问题。

有什么想法吗？

Answer 1

根据我上面的评论，我通过捕获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添加书签，后退按钮和浏览器历史记录工作等）。我对非答案“答案”表示道歉。

Sammy.js路由没有从IE10中的Knockout绑定链接发射

1 个答案: