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

Question

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

我正在使用Backbone.js

我有一种感觉,我处于这样一种情况,即我对我正在处理的问题有如此糟糕的理解,我正在问错误的问题,所以请告诉我,如果情况似乎是这样的话

Answer 1

我的错误是假设在骨干网中有一种特殊的,内置的方式.没有.

只需运行以下代码行

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)将触发骨干路径而不是简单无处可去.