History Support

This example demonstrates history support in intercooler.

As you click between the tabs, the URL and history will be updated correctly, allowing back button support

  • The content div tells Intercooler that it should be snap-shotted for history, rather than the body of the page, by using the ic-history-elt attribute. The element that is snap-shotted for history should be stable across your entire site so that the UI can be reliably restored.
  • The navigation tabs parent ul targets a div with the ic-target attribute. This div encloses both the tabs and content, allowing the server side to render a new tab state as well as the new content.

    The key element on the ul that enables history support is the ic-push-url attribute, which tells Intercooler to push the url into the location bar, with a new history entry, when a request is made.

    Finally, because this nav is layered on top of actual pages, we use the ic-select-from-response attribute on the ul to pick out the content from within the response for the tab UI.

  • Each tab has an ic-get-from attribute which points to the page for each respective tab. Because of the behavior inherited from the paren ul, the request will target the content div, will pick out the content tab-specific content from the response and will push a new entry into history.
  • We use some transition CSS to make the inner content (but not the tabs) fade in and out.