使用带有 #! 的 Backbone.js 路由器答案

【问题标题】：Use Backbone.js router with #!使用带有 #! 的 Backbone.js 路由器
【发布时间】：2012-02-19 14:37:01
【问题描述】：

当使用主干路由器时，它会将“页面”路由视为#page。

我可以做#！作为默认值，而不仅仅是 # ？

我想让 html 4 浏览器使用 #! (http://example.com/#!/page/subpage) 和具有 html5 历史记录的浏览器使用像 http://example.com/page/subpage 这样的普通地址，而不必使用“!page”作为路由。

“#！”就是让ajax页面可以爬取。请参阅http://code.google.com/web/ajaxcrawling/ 了解更多信息。

【问题讨论】：

标签： javascript backbone.js router

【解决方案1】：

您可以将!/ 添加到您的路线中：

routes: {
  "!/help":                 "help",    // #!/help
  "!/page/:subpage":        "search",  // #!/search/kiwis
  "!/page/:subpage/p:page": "search"   // #!/search/kiwis/p7
},

然后，您将获得完整的http://example.com/#!/page/subpage url。

【讨论】：

糟糕，我想我刚刚阅读了您的整个问题并意识到您不想因为推送状态而更改路线。对于那个很抱歉！留下这个答案，以防它帮助其他人。
它也有效，但就像 kpeel 的回答一样，使用 myRoute.navigate("page",true); url 片段显示为 # 而不是 #!;
嗯，是的，因为您必须通过完整的路线，即：myRoute.navigate("!/page",true);
操作！当然！所以它有效。但是对于推送状态，它给出了不受欢迎的！。一种解决方法是使用 Modernizr.history 并根据测试结果给出不同的值。

【解决方案2】：

查看 Backbone.js 源代码后，看起来Backbone.History 模块使用的哈希标签是硬编码的。

改变这一点的最简单方法是修改源本身，在第 741 行（Backbone 0.5.3）：

var hashStrip = /^#*/;

应改为：

var hashStrip = /^#!*/;

您还需要更改Backbone.History 中的navigate 函数以确保“！”出现。 863行：

window.location.hash = this.fragment = frag;

需要改成：

window.location.hash = this.fragment = "!" + frag;

不幸的是，由于它是用 Backbone.js 编写的，我不确定是否有更优雅的方法来解决这个问题。

【讨论】：

感谢kpeel的回答。现在 Backbone 可以识别 #!从地址，但是当使用 myRoute.navigate("page",true); url 片段显示为 # 而不是 #!;
啊，很好。不幸的是，这需要对 Backbone.js 源进行另一次编辑。我将通过更改更新我的答案。

【解决方案3】：

我致力于使用以下方法：

//Create the Route without routes (just the functions)
App.Router = Backbone.Router.extend({
    "quem-somos": function() {
        alert("quem-somos");
    }
});
//test for html5 history using Modernizr and instantiate the Route with normal urls for true and prefixed routes for false 
if(Modernizr.history){
    App.routePrefix="";
    App.router = new App.Router({
        routes:{
            "quem-somos" : "quem-somos"
        }
    });
}else{
    App.routePrefix="!/";
    App.router = new App.Router({
        routes:{
            "!/quem-somos" : "quem-somos"
        }
    });
}
Backbone.history.start({pushState: true});
//Call navigate when clicking a button
    App.router.navigate(App.routePrefix+"quem-somos",{trigger: true, replace: true});

这样我就可以得到http://example.com/quem-somos 和http://example.com/#!/quem-somos 来支持每个浏览器。

【讨论】：