javascript - BackboneJS Turbolinks历史记录问题

我有一个使用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();
});

这是场景：


用户在http://website.com/上着陆，该用户将其带到索引路由，该索引路由将模板加载到.wrapper中，如上面的路由代码所示。这很好。
用户单击我的Rails生成的页面之一（例如，我有一条http://website.com/books路线，显示用户创建的所有书。）这也可以正常工作。
用户仍在http://website/books路线上。如果单击我的徽标，它将带您到索引路由（由上面的主干代码生成的索引路由）。这很好。
现在的问题：如果您回到第3步，而不是单击徽标，而是决定单击“后退”按钮，然后从书本路径返回到索引路径，则放在$ el .wrapper中的内容是重复两次。例如，在我的模板中，我有“请选择一本书以继续”一词。如果您转到第1步，则只会看到一次这些单词。但是现在，每次您访问/ books时，您都会看到n组单词，然后按n次返回按钮。

最佳答案

这里的问题是用于使Backbone.js与Turbolinks一起播放的黑客。我猜想这种入侵的来源是this blog post，它建议每当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();
});

关于javascript - BackboneJS Turbolinks历史记录问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24686093/