Mat*_*son 9 internet-explorer sammy.js internet-explorer-10 knockout.js single-page-application
我有一个单页面应用程序,它使用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(没有Knockout): http ://jsbin.com/amivoq/1/
在这个例子中,我有一个记录链接的静态列表,而不是数据绑定列表.单击任何链接(按任何顺序)将导致该路由被附加到列表中(应该如此).
提醒一下,必须在IE中运行这些才能重现问题.
有任何想法吗?
根据我上面的评论,我通过捕获 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();
}
Run Code Online (Sandbox Code Playgroud)
这会调用以下 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");
}
}
Run Code Online (Sandbox Code Playgroud)
这些功能就像ShowAccountDetailFromId()和SwitchToPanel()只是显示和填充(使用 Ajax 调用 Web 服务)适当的<div>. 这可能是一种完全幼稚的方法,但它正在起作用(即您可以为 URL、后退按钮和浏览器历史记录添加书签,等等)。对于没有答案的“答案”,我深表歉意。
| 归档时间: |
|
| 查看次数: |
1272 次 |
| 最近记录: |