Backbone.js如何在不重新加载页面的情况下更改URL？

Question

我有一个网站，其中有一个用户页面。在该页面上，有几个链接可以让您浏览用户的个人资料。我想使得当这些链接中的一个被点击时，URL会改变，但是包含用户横幅的页面顶部不会重新加载。

我正在使用Backbone.js

我感觉自己处于一种情况中，即对我正在处理的问题了解太少，以至于我提出了错误的问题，请告诉我是否是这种情况。

- Peter Berg

Answer 1

我的错误是认为在backbone中有一种特殊的内置方法来完成这个任务，但实际上并没有。

只需运行以下代码行。

window.history.pushState('object or string', 'Title', '/new-url');

这将使您的浏览器URL在不重新加载页面的情况下发生更改。您可以立即在浏览器中打开javascript控制台，并尝试在此页面上使用它。 本文 更详细地解释了其工作原理（如此SO帖子所述）。

现在，我刚刚将以下事件绑定到文档对象（我正在运行单个页面站点）：

bindEvents: () ->
    $(document).on('click', 'a', @pushstateClick)


pushstateClick: (e) ->
    href = e.target.href || $(e.target).parents('a')[0].href
    if MyApp.isOutsideLink(href) == false
        if e.metaKey 
                      #don't do anything if the user is holding down ctrl or cmd; 
                      #let the link open up in a new tab
        else
            e.preventDefault()
            window.history.pushState('', '', href);
            Backbone.history.checkUrl()

查看这篇文章获取更多信息。

请注意，您可以将选项pushstate: true传递给Backbone.history.start()调用，但这只是使直接导航到某个页面（例如example.com/exampleuser/followers）触发backbone路由而不仅仅是导致没有任何反应。

- Peter Berg

---

您也可以调用 window.location = '/#/' + page_uri; 来触发 Backbone 的路由。 - Sven van Zoelen

@Sven，我的关注点在于使用实际路由进行工作——即在没有“#”的情况下进行路由。 - Peter Berg

自0.9.0版本开始，Backbone.Router拥有一个navigate方法。 - Emil Lundberg

Answer 2

路由器在这种情况下非常有用。基本上，创建一个具有几个不同路由的路由器。您的路由将调用不同的视图。这些视图只会影响您定义的页面部分。我不确定这个视频是否有帮助，但它可能会让您了解路由器如何与页面交互：http://www.youtube.com/watch?v=T4iPnh-qago 以下是一个简单的示例：

myapp.Router = Backbone.Router.extend({

    routes: {
        'link1': 'dosomething1',
        'link2': 'dosomething2',
        'link3': 'dosomething3'
    },

    dosomething1: function() {
        new myapp.MyView();
    },
    dosomething2: function() {
        new myapp.MyView2();
    },
    dosomething3: function() {
        new myapp.MyView3();
    }

});

那么你的URL将会变成这样：www.mydomain.com/#link1。

另外，因为<a href=''></a>标签会自动调用页面刷新，所以如果你不想刷新页面，请确保在它们上面调用.preventdefault();。

- bentedder