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");部分而我不明白为什么，有人可以向我解释我是什么＃39;我做错了吗？

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

});

Backbone.js PushState True

2 个答案: