Backbone.js PushState True

Question

我已经在骨干网中创建了一个网站，由于各种原因，我决定要删除网址中的哈希值。 我改变了历史。开始了

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进行定期动作元素，并有骨干路由器的路由吧。

我将使用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的选项，我们必须拦截点击行为，如上所述。

如果您有一个混合应用程序，一些内部骨干链接，一些强制页面刷新，则阻止每个链接的默认（）是不对的。 应用程序其他部分的链接将被破坏。

可以使用上述的变体并利用如果没有内部视图导航到的事实，Backbone.history.navigate（）将返回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();

});