jQuery 这是使用 History.js 的正确方法吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13278822/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is this a proper way to use History.js?
提问by dansalmo
I was able to put together a simplified complete History.js example using three links to load fragments of content from a full page without updating the page and while updating the browser history.
我能够使用三个链接来组合一个简化的完整 History.js 示例，以在不更新页面和更新浏览器历史记录的情况下从整个页面加载内容片段。
Here are the relevent code snippets - a complete working example is here http://jsfiddle.net/PT7qx/show
这是相关的代码片段 - 一个完整的工作示例在这里http://jsfiddle.net/PT7qx/show
<a href="/page-header">Page Header</a>
<a href="/login-form">Login Form</a>
<a href="/nothing">Nothing</a>
<script>
var History = window.History;
if (!History.enabled) {
return false;
}
History.Adapter.bind(window, 'statechange', function() {
var State = History.getState();
History.log(State.data, State.title, State.url);
if (State.title == 'Page Header') {
$('#content').load('/user/login/ .pageHeader > *');
}
if (State.title == 'Login Form') {
$('#content').load('/user/login/ #common-form > *');
}
if (State.title == 'Nothing') {
$('#content').empty()
}
});
$('body').on('click', 'a', function(e) {
var urlPath = $(this).attr('href');
var Title = $(this).text();
History.pushState(null, Title, urlPath);
// prevents default click action of <a ...>
return false;
});
<\script>
I would like to know if this is the correct usage. The previous version had an ability to bind to an event using the # urls. I have not seen any examples for binding events to urls with this latest version so I used the .on() click event to call History and sorted out what link was clicked in there.
我想知道这是否是正确的用法。以前的版本能够使用 # urls 绑定到事件。我还没有看到任何使用最新版本将事件绑定到 url 的示例，所以我使用 .on() 单击事件来调用历史记录并整理出在那里单击的链接。
I am not sure if this is the best way to accomplish this for this example.
对于此示例，我不确定这是否是完成此操作的最佳方法。
回答by dansalmo
After working on this some more, I have come up with a simple, but complete example for how to use the latest History.js. Here is working jsfiddle examplethat does Ajax loads of HTML fragments hosted on Github
在对此进行了更多研究之后，我想出了一个简单但完整的示例来说明如何使用最新的 History.js。这是一个工作 jsfiddle 示例，它执行 Ajax 加载Github 上托管的HTML 片段
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Simple History.js Ajax example by dansalmo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://balupton.github.com/history.js/scripts/bundled/html4+html5/jquery.history.js"></script>
<style type='text/css'>
.hidden {
display: none;
visibility: hidden;
}
</style>
</head>
<body>
<a href="/home">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
<a href="/other">Other</a>
<p>The whole page will not re-load when the content below is updated, yet the URL is clean and the back button works!<p><br />
<div id="content">
<div id="home">Home Page content</div>
</div>
<br />
<p>The content div will be updated with a selected div fragment from an HTML file hosted on github, however the broswer will see each content update request as a part of the page history so that the back button can be used.</p>
<br />
<p>Adding more menu items is as simple as adding the new links and their corresponding html fragments.<p>
<div id="hidden_content" class="hidden"></div>
</body>
<script type='text/javascript'>//<![CDATA[
$(function(){
var History = window.History;
if (History.enabled) {
State = History.getState();
// set initial state to first page that was loaded
History.pushState({urlPath: window.location.pathname}, $("title").text(), State.urlPath);
} else {
return false;
}
var loadAjaxContent = function(target, urlBase, selector) {
$(target).load(urlBase + ' ' + selector);
};
var updateContent = function(State) {
var selector = '#' + State.data.urlPath.substring(1);
if ($(selector).length) { //content is already in #hidden_content
$('#content').children().appendTo('#hidden_content');
$(selector).appendTo('#content');
} else {
$('#content').children().clone().appendTo('#hidden_content');
loadAjaxContent('#content', State.url, selector);
}
};
// Content update and back/forward button handler
History.Adapter.bind(window, 'statechange', function() {
updateContent(History.getState());
});
// navigation link handler
$('body').on('click', 'a', function(e) {
var urlPath = $(this).attr('href');
var title = $(this).text();
History.pushState({urlPath: urlPath}, title, urlPath);
return false; // prevents default click action of <a ...>
});
});//]]>
</script>
</html>
