我能够使用三个链接来组合一个简化的完整History.js示例,以从整个页面加载内容片段,而无需更新页面和更新浏览器历史记录。
这是相关的代码段-
完整的工作示例在此处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>
我想知道这是否正确。以前的版本可以使用#url绑定到事件。我没有看到使用此最新版本将事件绑定到url的任何示例,因此我使用了.on()click事件来调用History并整理出在其中单击了什么链接。
我不确定这是否是完成此示例的最佳方法。
在完成更多工作之后,我提出了一个简单而完整的示例来说明如何使用最新的History.js。这是工作的jsfiddle示例,该示例执行Github上托管的 Ajax
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>
问题内容: 我读这个和这个,结果发现,在课堂上我需要保存到类的引用,当东西在发生类,我们执行由类的接口中定义的方法工具。好吧,我明白了。我以不同的方式使用接口来调用回调: 我发现这种方式更具可读性,更容易理解,但是不确定这是否是不好的做法。因此,我可以随意走这条路吗? 问题答案: 所以我可以随意走这条路吗? 这种方式不是很正确。 您在说的是称为Observer或/ 模式。 简而言之:订户想要从发布
我读了这篇文章和这篇文章,发现在类中,我需要保存对类的引用,当类中发生一些事情时,我们执行一个由类实现的接口定义的方法。不知何故我明白了。我以不同的方式使用接口来调用回调: 我发现这种方式更易读,更容易理解,但不确定这是否是一个不好的做法。所以我可以自由地走得更远吗?
问题内容: 我知道我不应该改变输入,而应该克隆对象来改变它。我遵循在redux入门项目上使用的约定,该约定使用: 用于添加项目-我使用了点差将项目追加到数组中。 用于删除我使用的: 但这改变了输入状态对象-即使我要返回一个新对象,也禁止这样做吗? 问题答案: 不,永远不要改变你的状态。 即使您要返回一个新对象,您仍然会污染旧对象,而您从来不希望这样做。这使得在旧状态与新状态之间进行比较时会出现问题
问题内容: 这是存储过程中的正确方法吗? 问题答案: 如今,我喜欢使用非具体化的而不是临时表-尽管在某些情况下(例如数据需要索引),我将使用临时表。 我主要会改变很多化妆品的东西,以期将来使它更具可读性 (由于我没有您的数据的副本,因此未经过测试) 我通常使用Aaron Bertrand的建议来编写存储过程,此博客文章是我的清单,也是我用来统一我所有Sproc所用样式的模板: https://sq
问题内容: 即使在使用Java Swing一年以上之后,对我来说,它仍然像魔术一样。如何正确使用BufferStrategy,尤其是方法? 我想添加一个JFrame和一个Canvas,然后进行绘制。我还希望能够调整()画布的大小。每次我调整Canvas的大小时,似乎都会被浪费掉,或者变得毫无用处,因为在上使用并没有真正做任何事情。另外,它具有怪异的不确定性行为,我不知道如何正确同步它。 这就是我的
问题内容: 我想在Linux上使用该机制。我希望我的应用程序知道何时更改了文件。能否请您提供给我一个示例,该怎么做? 问题答案: 文档(来自具有inotify的Monitor文件系统活动) 在C API 提供了三个系统调用来构建各种文件系统监视器: 在内核中创建子系统的实例,并在成功和失败时返回文件描述符。与其他系统调用一样,如果失败,请检查诊断。 顾名思义,它增加了一块 手表 。每个监视都必须提