如何使用 hasher.js 和 crossroads.js 重新加载路由?
How to reload a route using hasher.js and crossroads.js?
我目前有这个代码:
crossroads.addRoute('/login', function(){
$.ajax({
url: '/login',
type: 'GET',
data: {
},
success: function(msg) {
$('#' + main_window).html(msg);
}
})
});
连同此 hasher.js 用于维护历史记录:
function parseHash(newHash, oldHash){
crossroads.parse(newHash);
}
hasher.initialized.add(parseHash); //parse initial hash
hasher.changed.add(parseHash); //parse hash changes
hasher.init(); //start listening for history change
$('a').on('click', function(e) {
e.preventDefault();
hasher.setHash($(this).attr('href'));
});
现在当我有一个显示#/login 并单击它的 link 时,登录页面加载正常。但是,如果用户再次单击登录 link,页面不会重新加载。我知道点击正在注册,但 routing/hashing 没有触发。我该如何做到这一点?
如有任何帮助,我们将不胜感激。谢谢!
您没有使用 hasher.setHash("#/currentpage")
更改任何内容,因为您已经在该页面上。所以 change 事件永远不会被触发。你可能会去:
$('a').on('click', function(e) {
e.preventDefault();
hasher.setHash('');
hasher.setHash($(this).attr('href'));
});
但这会使历史混乱,因此您可以在点击时强制重新加载,如果您使加载方法可用:
var loadLogin = function(){
$.ajax({
.... your ajax settings ....
});
};
crossroads.addRoute('/login', loadLogin);
$('a').on('click', function(e) {
e.preventDefault();
var newHash = $(this).attr('href');
if(newHash === '/login' && hasher.getHash() === '/login') {
loadLogin()
} else {
hasher.setHash(newHash);
}
});
编辑
正如@Patchesoft 指出的那样,crossroads 有一个名为 ignoreState
的 属性,它将强制任何请求通过路由器功能,即使在当前页面上 - https://millermedeiros.github.io/crossroads.js/#crossroads-ignoreState
我目前有这个代码:
crossroads.addRoute('/login', function(){
$.ajax({
url: '/login',
type: 'GET',
data: {
},
success: function(msg) {
$('#' + main_window).html(msg);
}
})
});
连同此 hasher.js 用于维护历史记录:
function parseHash(newHash, oldHash){
crossroads.parse(newHash);
}
hasher.initialized.add(parseHash); //parse initial hash
hasher.changed.add(parseHash); //parse hash changes
hasher.init(); //start listening for history change
$('a').on('click', function(e) {
e.preventDefault();
hasher.setHash($(this).attr('href'));
});
现在当我有一个显示#/login 并单击它的 link 时,登录页面加载正常。但是,如果用户再次单击登录 link,页面不会重新加载。我知道点击正在注册,但 routing/hashing 没有触发。我该如何做到这一点?
如有任何帮助,我们将不胜感激。谢谢!
您没有使用 hasher.setHash("#/currentpage")
更改任何内容,因为您已经在该页面上。所以 change 事件永远不会被触发。你可能会去:
$('a').on('click', function(e) {
e.preventDefault();
hasher.setHash('');
hasher.setHash($(this).attr('href'));
});
但这会使历史混乱,因此您可以在点击时强制重新加载,如果您使加载方法可用:
var loadLogin = function(){
$.ajax({
.... your ajax settings ....
});
};
crossroads.addRoute('/login', loadLogin);
$('a').on('click', function(e) {
e.preventDefault();
var newHash = $(this).attr('href');
if(newHash === '/login' && hasher.getHash() === '/login') {
loadLogin()
} else {
hasher.setHash(newHash);
}
});
编辑
正如@Patchesoft 指出的那样,crossroads 有一个名为 ignoreState
的 属性,它将强制任何请求通过路由器功能,即使在当前页面上 - https://millermedeiros.github.io/crossroads.js/#crossroads-ignoreState