Sammy.js 路由未从 IE10 中的 Knockout-bound 链接触发答案

【问题标题】：Sammy.js routes not firing from Knockout-bound links in IE10Sammy.js 路由未从 IE10 中的 Knockout-bound 链接触发
【发布时间】：2013-08-01 15:33:56
【问题描述】：

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

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

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

为了说明，我已经剥离了所有内容，除了重新创建问题的最低要求并创建了两个 jsbin 示例：

示例 1（带淘汰赛）： http://jsbin.com/aretis/2/

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

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

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

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

有什么想法吗？

【问题讨论】：

我现在在使用 IE 10 的应用程序中遇到了同样的问题。你有公开的激活方法吗？来回切换时会调用它吗？
我通过绑定到 $(window).on("hashchange") 并编写我自己的 URL 路由器解决了（也许“解决”是一个更好的短语）这个问题。我的需求非常简单，而且我怀疑我只使用了 Sammy.js 大约 10% 的功能。我仍然对我的问题的根源感到好奇，所以我把这个问题留了下来。
你能用 sammy JS unminified 重新创建示例 1 吗？我还基于 SammyJS 创建了自己的路由器。 @Matt Peterson，感谢您的提示。我不知道'hashchange'事件。我正在用计时器检查 windows.location :)。
一个例子或代码会很棒。我遇到了同样的问题，不知道如何解决。
看起来你在描述github.com/quirkey/sammy/pull/183 - 这个问题已经解决了，但你可能需要等待一段时间才能稳定发布 - 我建议你应用补丁你自己，因为它不是很大。

标签： internet-explorer knockout.js internet-explorer-10 single-page-application sammy.js

【解决方案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() 这样的函数只是显示和填充（使用Ajax 调用Web 服务）适当的<div>。这可能是一种完全幼稚的方法，但它是有效的（即您可以为 URL 添加书签、后退按钮和浏览器历史记录等）。对于未回答的“答案”，我深表歉意。

【讨论】：