loading... Pacem JS

PacemRouterElement is the custom element that handles the browser history state both in reading and in writing mode.

It wraps the core functionalities included in the HTML5 History API.

Template, Path and State

The router template property/attribute gets explicited in a string where curly braced trunks signify state properties, like:


Given a navigated url, the router deserializes an object with the read-only controller, view and id (optional) properties. The router may be forced to update its state by calling the navigate() method.

This whole web app exploits this routing system. Feel free to lurk into the source code. Here's a hint:

<!-- router (manages current path and navigation history) -->
<pacem-router template="/{package}/{view}" path="/intro/welcome" id="router"></pacem-router>

<!-- view (renders the requested paths) -->
<pacem-view id="view" url="{{ '/views/'+ #router.state.package + '/'+ #router.state.view +'.html' }}"></pacem-view>

<!-- anchor (triggers navigation) -->
<pacem-a href="/basic/router" router="#router">
Go to router page

Navigation through State Change

PacemRouterElement offers a convenient navigate() method which accepts both a string path and a partial state.
When a partial state object is provided, it gets merged into the one currently active on the router and the resolved into a proper path.

Example below:

Preventing Navigation

PacemRouterElement force the window global to dispatch a couple of events:

To properly prevent a navigation act both in a full-reload scenario (hit F5 or change browser url on the navigation bar) or during a partial navigation (router-based), you can exploit the ad-hoc PacemBeforeunloadElement custom element.

Here's a sample how to: