我有一个网站,其中有一个用户页面。在该页面上,有几个链接可以让您浏览用户的个人资料。我想使得当这些链接中的一个被点击时,URL会改变,但是包含用户横幅的页面顶部不会重新加载。
我正在使用Backbone.js
我感觉自己处于一种情况中,即对我正在处理的问题了解太少,以至于我提出了错误的问题,请告诉我是否是这种情况。
我正在使用Backbone.js
我感觉自己处于一种情况中,即对我正在处理的问题了解太少,以至于我提出了错误的问题,请告诉我是否是这种情况。
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路由而不仅仅是导致没有任何反应。
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。
另外,因为<a href=''></a>
标签会自动调用页面刷新,所以如果你不想刷新页面,请确保在它们上面调用.preventdefault();。
window.location = '/#/' + page_uri;
来触发 Backbone 的路由。 - Sven van ZoelenBackbone.Router
拥有一个navigate
方法。 - Emil Lundberg