jquery - Backbone.js 不改变 url 的路由

Question

我正在将基于 Backbone.js 和 jQuery 的单页 Web 应用程序迁移到 Chrome 扩展。然而，pushState 和基于 hashbang 的路由器模式似乎都不能很好地适应扩展内的环境。我得出的结论是，最好直接渲染用户交互的 View ，完全绕过 window.location 系统。但是，我不太确定如何在不更改数十个文件中对 Router.navigate 的调用的情况下实现这一点。

是否有可插入/模块化的方法来保留 Backbone 路由系统但绕过对 url 的任何更改？

Answer 1

我真的想坚持使用 Router.navigate 来受益于 Backbone.js 提供的路由系统，而不必在 Chrome 扩展程序中使用时处理 hashbang bug(例如，包含斜杠的路由被覆盖)，您可以让 Router.navigate 直接加载网址，跳过整个 PushState 体操。

这实际上很容易实现:

Router = Backbone.Router.extend({

  navigate: function (url) {

    // Override pushstate and load url directly
    Backbone.history.loadUrl(url);

  },

  // Put routes here
  routes: { }

});

然后，您可以调用 Router.navigate(url) 加载新路线而不更改历史记录，甚至可以使用如下事件将操作绑定(bind)到包含 data-backbone 属性(例如 <a href="login" data-backbone>Login</a> )的每个链接:

$(function(){

  // Initialize router
  Router = new Router;
  Backbone.history.start();

  // Bind a[data-backbone] to router
  $(document).on('click', 'a[data-backbone]', function(e){
    e.preventDefault();

    Router.navigate( $(this).attr('href') );
  });

});