7

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

我正在使用 Backbone.js

我有一种感觉，我处于这样一种情况，我对我正在处理的问题的理解如此之差，以至于我问错了问题，所以如果情况似乎如此，请告诉我

4

2 回答 2

10

我的错误是假设在主干中有一种特殊的内置方法可以做到这一点。没有。

只需运行以下代码行

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

于 2013-07-10T10:56:23.930 回答
1

在这种情况下，路由器是您的朋友。基本上，创建一个具有多个不同路由的路由器。您的路线将调用不同的视图。这些视图只会影响您定义的页面部分。我不确定这个视频是否会有所帮助，但它可能会让您了解路由器如何与页面交互：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(); 如果您不想刷新页面，请点击它们。

于 2013-07-09T13:59:21.870 回答