javascript - 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 路线上。如果您单击我的 Logo ，它将带您进入索引路线(由上面的主干代码生成的路线)。这很好用。

4. 现在的问题是:如果您返回到步骤 3，而不是单击 Logo ，而是决定单击后退按钮，然后从书籍路径返回到索引路径，则放入其中的内容$el .wrapper 重复两次。例如，在我的模板中，我有“请选择一本书以继续”的字样。如果您转到第 1 步，您只会看到这些单词一次。但现在，每次您转到/books，然后点击后退按钮 n 次，您都会看到 n 组单词。

Answer 1

这里的问题是用于使 Backbone.js 与 Turbolinks 一起运行的 hack。我猜这个黑客的来源是 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();
});