这是使用History.js的正确方法吗?

我能够将一个简化的完整History.js示例放在一起,使用三个链接从整页加载内容片段而不更新页面,同时更新浏览器历史记录。

以下是相关的代码片段 – 这里有一个完整的工作示例http://jsfiddle.net/PT7qx/show

Page Header Login Form Nothing  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  return false; });  

我想知道这是否正确用法。 之前的版本具有使用#urls绑定到事件的能力。 我没有看到任何将事件绑定到具有此最新版本的URL的示例,因此我使用.on()click事件来调用History并整理出在那里单击的链接。

我不确定这是否是此示例中实现此目的的最佳方法。

在进行了更多工作之后,我想出了一个简单但完整的示例来说明如何使用最新的History.js。 这是一个工作jsfiddle示例 ,它执行在Github上托管的 Ajax加载的HTML片段

     Simple History.js Ajax example by dansalmo      Home About Contact Other 

The whole page will not re-load when the content below is updated, yet the URL is clean and the back button works!


Home Page content

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.


Adding more menu items is as simple as adding the new links and their corresponding html fragments.