Backbone.js PushState 真

Question

我在 backbone 中创建了一个站点，出于各种原因，我决定删除 URL 中的哈希。我已经从

更改为 history.start

Backbone.history.start();

到

Backbone.history.start({pushState: true, root: '/'});

但是一旦我这样做，路由就会停止正常工作。

我的路线是这样的：

var Router = Backbone.Router.extend({
  routes: {
    "": "home",
    "home": "home",
    "artists": "artists",
  }
});

var router = new Router;
router.on('route:home', function() {
  console.log("home");
  // Code
});

router.on('route:artists', function() {
  console.log("artists");
  // Code
});

//Backbone.history.start();
Backbone.history.start({
  pushState: true,
  root: '/'
});

如果我运行它没有 pushState 它工作正常，如果我运行它有 pushState 它没有到达 console.log("artists"); 部分，我不明白为什么，可以有人向我解释我做错了什么吗？

Answer 1

您需要阻止 a 元素执行其常规操作并让 backbone 路由器路由它。

我将使用 jQuery 编写示例来概述应该发生的情况：

$(document).on("click", "a", function(e)
{
    e.preventDefault(); // This is important

    var href = $(e.currentTarget).attr('href');

    router.navigate(href, true); // <- this part will pass the path to your router

});

Answer 2

现在我明白了为什么全局覆盖标签行为的需求没有出现在文档中。我认为我们打算像这样在我们的视图中使用句柄导航：

MyView = Backbone.View.extend({
  events: {
    "click a.foo": "foo"
  },

  foo: function(e){
    e.preventDefault();
    history.navigate("foo");
    $("#output").append("foo");
  }
});

但是，如果我们想保留在我们的标签中使用简单 HREF 的选项，我们必须像上面那样拦截点击行为。

如果您有一个混合应用程序，其中一些 link 位于 backbone 内部，而另一些强制刷新页面，则为每个 link 都设置 preventDefault() 是不正确的。指向应用程序其他部分的链接将被破坏。

可以使用上述方法的变体，并利用以下事实：如果没有要导航到的内部视图，Backbone.history.navigate() 将 return false。

$(document).on("click", "a", function(e)
{

    var href = $(e.currentTarget).attr('href');

    var res = Backbone.history.navigate(href,true);
    //if we have an internal route don't call the server
    if(res)
        e.preventDefault();

});

Backbone.js PushState 真

Backbone.js PushState True

javascript

backbone.js

pushstate