在 Jekyll 中使用主干.js 路由答案

【问题标题】：Using backbone.js routing with Jekyll在 Jekyll 中使用主干.js 路由
【发布时间】：2013-12-15 10:13:03
【问题描述】：

我正在使用Jekyll 生成一个静态站点。我正在使用backbone.js 做一些路由。

假设主页位于localsite.com...我不确定如何为以下 URL 生成路由。

http://localsite.com/hulk &
http://localsite.com/thor

hulk 和 thor 是要路由的名称。

我的backbone.js路由器如下：

<script>
    var AppRouter = Backbone.Router.extend({
        routes: {
            ":name": "nameRoute" // should match http://localsite.com/anything-here
        }
    });
    // Initiate the router
    var app_router = new AppRouter;

    app_router.on('route:nameRoute', function(name) {
        console.log(name);
    })

    Backbone.history.start({pushState: true});

</script>

我无法让这个工作。有什么我想念的吗？我能用 Jekyll 做这个路由吗？

我的 Jekyll 的 _config.yml 有

permalink: pretty

如何让这些路线发挥作用？

还有其他建议吗？我的目标是在github pages 上托管时获得类似的路由。

【问题讨论】：

url必须是localsite.com/thor，还是localsite.com#thor？
@RustyToms，URL 只会是 localsite.com/thor。

标签： javascript backbone.js url-routing jekyll

【解决方案1】：

就路由而言，它非常简单。第二部分是要调用的函数的名称，它应该在你的路由器内部定义。因此，只需将您的代码更改为此，它应该可以工作：

var AppRouter = Backbone.Router.extend({
    routes: {
        ":name": "nameRoute" // should match http://localsite.com/anything-here
    },

    nameRoute: function(name){
        console.log(name);
    }
});
// Initiate the router
var app_router = new AppRouter;

Backbone.history.start({pushState: true});

如果您遇到 pushState 问题并摆脱骨干默认主题标签，请查看此 SO 问题 BackboneJS - Router issues - how to get clean URL's（对于本地链接尤其重要，如果您不想继续从服务器重新加载），并且这是一个网站摆脱#的示例：http://artsy.github.io/blog/2012/06/25/replacing-hashbang-routes-with-pushstate/

【讨论】：