Backbone.js 可以在页面不重新加载的情况下更改 URL。

14 浏览
0 Comments

Backbone.js 可以在页面不重新加载的情况下更改 URL。

我有一个网站有一个用户页面。在该页面上，有几个链接，让您探索用户的资料。我想要做到的是，当点击其中一个链接时，URL会更改，但包含用户横幅的页面顶部不会重新加载。

我正在使用Backbone.js

我有一种感觉，我处于那种对我正在处理的问题的了解很差的情况之一，所以请让我知道是否是这种情况。

admin 更改状态以发布 2023年5月20日
0

2 答案

0 Comments

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

此外，因为 标签会自动调用页面刷新，因此请确保在它们上面调用 .preventDefault(); 如果您不希望页面刷新。

0
0 Comments

我的错误是认为在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路由，而不是什么也不做。

0