javascript - 没有 hashbang 的 Backbone 路由器

Question

我已经设置了一个 super 简单的 Backbone 应用程序，只有一个路由器和两个 View ，以尝试确定处理没有 hashbang 的路由的正确方法。

var Router = Backbone.Router.extend({
    routes: {
        '': 'index',
        'episodes': 'episodes'
    },

    index: function () {
        var view = new IndexView();
        view.render();
    },

    episodes: function () {
        var view = new EpisodesView();
        view.render();
    }
});

var IndexView = Backbone.View.extend({
    el: $('#primary'),
    render: function () {
        console.log('index view');
    }
});

var EpisodesView = Backbone.View.extend({
    el: $('#primary'),
    render: function () {
        console.log('episodes view');
    }
});

var router = new Router;
Backbone.history.start({pushState: true});

我意识到 history 对象允许在页面之间向前和向后导航，这很棒。然而，它的实际实现方式对我来说似乎有点困惑。

例如，我创建了一个简单的 MAMP 服务器来提供 index.html 文件和 JS 文件。导航到 http://backbone:8888/，控制台会像我告诉的那样记录 index view。但是，导航到 http://backbone:8888/episodes (通过在地址栏中输入)会返回 404。但是，如果我导航到 http://backbone:8888/#episodes，URL 重定向到 http://backbone:8888/episodes (没有 hashbang)，我将 episodes View 记录到控制台，这显然意味着它正在点击 EpisodesView View 。

从这里，我可以在索引 View 和剧集 View 之间来回切换。 (后击/，前击/剧集)。一切都很好，直到我再次在 /episodes 上点击刷新。 404...

所以我的问题是:如何设置 Backbone 来处理 URL，而不依赖 hashbangs？我在该主题上找到的所有内容都表明“哦，只是 pushState!”。嗯，我正在使用 pushState，就像我上面描述的那样，您无法直接访问像 /episodes 这样的 URL，而不会收到 404 错误。

Answer 1

当您使用推送状态时，页面是从后端提供的，这意味着您必须在后端定义与前端路由相对应的相应路由。

如果后端没有找到请求的路由，那么它将发送 404 消息，因为它不知道要提供什么服务。在您的情况下，剧集 View 会在前端级别触发，但当页面刷新时，浏览器没有 DOM 来呈现 View ，因为没有提供任何服务。

默认情况下，路由 http://backbone:8888/ 将提供索引文件，因为这是网络服务器的配置方式。
我不确定您使用的是什么后端技术，但是要从 http://backbone:8888/episodes 提供文件，只需确保您的后端设置了一个可以提供服务的路由器请求的路线，它应该可以工作。