Backbone.js PushState True

Question

我在主干中创建了一个站点，出于各种原因，我决定删除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元素进行常规操作，并让骨干路由器路由它。

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

如果您有一个混合应用程序，一些链接到主干，还有一些强制页面刷新，那么对于每个链接来说，preventDefault()都是不正确的。链接到应用程序的其他部分将被打破。

您可以使用上述变化，并利用这样一个事实:如果没有内部视图可导航，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();

});