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();
});

以下是该方案：

用户登陆 http://website.com/ ，这会将用户带到索引路径，该路径将模板加载到.wrapper中，该路径代码显示在上面的路由代码中。这很好。
用户点击我的一个Rails生成的网页（例如，我有一条 http://website.com/books 路线，其中显示了用户创建的所有图书。）这也可行
用户仍在 http://website/books 路线上。如果单击我的徽标，它会将您带到索引路径（由上面的骨干代码生成的路径）。这很好。
现在问题：如果你回到第3步，而不是点击徽标，决定点击后退按钮，然后从书籍路线回到索引路线，内容放在里面$ el .wrapper重复两次。例如，在我的模板中，我有“请选择要继续的书”。如果你去了第1步，你只会看到一次这样的话。但是现在，每次你去/书籍然后点击后退按钮n次，你会看到n组单词。

Answer 1

这里的问题是用于使Backbone.js与Turbolinks一起玩的hack。我想这个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();
});

BackboneJS Turbolinks历史问题

1 个答案: