BackboneJS Turbolinks 历史问题答案

【问题标题】：BackboneJS Turbolinks History IssueBackboneJS Turbolinks 历史问题
【发布时间】：2014-07-10 20:53:28
【问题描述】：

我有一个使用 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 次返回按钮。

【问题讨论】：

标签： javascript jquery ruby-on-rails backbone.js turbolinks

【解决方案1】：

这里的问题是用于使 Backbone.js 与 Turbolinks 一起使用的 hack。我猜这个 hack 的来源是 this blog post，它建议在 Turbolinks 处理链接时重新启动历史记录。但是，停止历史记录并不会清除现有路线。所以你在处理page:load 事件后得到的是处理相同路由的两个路由器对象。当您返回时，Backbone.History 将触发每个匹配路由的 every 回调，即使它们注册了相同的路由 - 这意味着 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();
});

【讨论】：