这是使用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.