Backbone.js 在不重新加载页面的情况下更改 url答案

【问题标题】：Backbone.js change url without reloading the pageBackbone.js 在不重新加载页面的情况下更改 url
【发布时间】：2013-07-07 04:01:49
【问题描述】：

我有一个有用户页面的网站。在该页面上，有几个链接可让您浏览用户的个人资料。我想这样做，当单击其中一个链接时，网址会发生变化，但包含用户横幅的页面的前三分之一不会重新加载。

我正在使用 Backbone.js

我有一种感觉，我对自己正在处理的问题的理解太差了，以至于我问错了问题，所以如果这似乎是，请告诉我案例

【问题讨论】：

标签： backbone.js pushstate

【解决方案1】：

我的错误是假设在主干中有一种特殊的内置方式来执行此操作。没有。

只需运行以下代码行

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

将导致您的浏览器的 URL 更改而不重新加载页面。您现在可以在浏览器中打开 javascript 控制台并在此页面上尝试。 This article 更详细地解释了它的工作原理（如 this SO post 中所述）。

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

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

请参阅this post 了解更多信息。

请注意，您可以将选项 pushstate: true 传递给对 Backbone.history.start() 的调用，但这只会触发直接导航到某个页面（例如 example.com/exampleuser/followers）一条骨干路线，而不是简单地通向无处。

【讨论】：

您也可以拨打window.location = '/#/' + page_uri;触发骨干路由。
@Sven 虽然我关心的是使用实际路由——即没有'#'的路由
Backbone.Routers 自 0.9.0 版起有一个 navigate method。

【解决方案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();
    }

});

然后您的网址将如下所示：www.mydomain.com/#link1。

另外，由于<a href=''></a> 标签会自动调用页面刷新，请确保您调用的是 .preventDefault();如果您不想刷新页面，请点击它们。

【讨论】：