Backbone.js路由而不更改url

Question

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

是否有可插拔/模块化方式来保持Backbone路由系统但绕过对URL的任何更改？

Answer 1

我真的很想继续使用Router.navigateBackbone.js提供的路由系统,而不必在Chrome扩展中使用hashbang错误(例如包括斜线被覆盖的路由),你可以Router.navigate直接加载url,跳过整个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)加载新路由而不更改历史记录,甚至可以将操作绑定到包含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') );
  });

});