BackboneJS Turbolinks历史问题

Question

我有一个使用Turbolinks和Backbone.js的Rails 4应用程序.

基本上,我的路由器看起来像:

var BookRouter = Backbone.Router.extend({
  routes: {
     '': 'index'
  },
  index: function(){
     var bookView = new BookView({
         el: ".wrapper"
     });
  }
});

$(function() {
   if (Backbone.History.started == false) {
     var bookRouter = new BookRouter();
     Backbone.history.start({ pushState: true, hashChange: false });
   }
});

$(document).on('page:load', function (){
   Backbone.history.stop();
   Backbone.history.start({ pushState: true, hashChange: false });
   var bookRouter = new BookRouter();
});

这是场景:

1. 用户登陆http://website.com/,将用户带到索引路径,索引路径将模板加载到.wrapper中,如上面的路由代码所示.这很好用.

2. 用户点击我的一个Rails生成的页面(例如,我有一条http://website.com/books路线显示用户创建的所有书籍.)这也可以.

3. 用户仍然在http://website/books路线上.如果单击我的徽标,它会将您带到索引路径(由上面的骨干代码生成的路径).这很好用.

4. 现在问题:如果你回到第3步,而不是点击徽标,决定点击后退按钮,然后从书籍路线回到索引路线,放入$ el .wrapper的内容是重复两次.例如,在我的模板中,我有"请选择要继续的书".如果你去了第1步,你只会看到一次这样的话.但是现在,每次进入/书籍然后点击后退按钮n次,你会看到n组单词.

Answer 1

这里的问题是用于使Backbone.js与Turbolinks一起玩的hack.我想这个hack的来源是这篇博文,建议每当Turbolinks处理链接时重新启动历史记录.但是,停止历史记录并不能清除现有路线.因此,处理page:load事件后得到的是两个处理相同路由的路由器对象.而Backbone.History将触发每一个回调每次匹配的路由,当你回去,甚至当他们注册了同样的路线-这意味着index回调将运行两次,因此,内容重复.

处理它的一种方法是简单地删除重复的路由器:

$(document).on('page:load', function (){
   Backbone.history.stop();
   Backbone.history.start({ pushState: true, hashChange: false });
});

这足以在调用Turbolinks时触发路由器.但是,似乎有一种更简洁的方法来Backbone.History触发路由器.从我从源代码中可以看出,这也应该正常工作:

$(document).on('page:load', function (){
   Backbone.history.checkUrl();
});