Question

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

我正在使用Backbone.js

我有一种感觉，我处于这样一种情况，即我对我正在处理的问题有如此糟糕的理解，我提出了错误的问题，所以如果看起来那么请告诉我案件

Answer 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）将触发骨干路线，而不是简单地导致无处可去。

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

});

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

此外，由于<a href=''></a>标记会自动调用页面刷新，因此请确保调用.preventDefault（）;如果您不想刷新页面，请使用它们。

Backbone.js更改url而不重新加载页面

2 个答案: