Snowbeat

// Creating the listener
document.documentElement.addEventListener("click", this.onElementClicked.bind(this));

// Elsewhere
Router.prototype.onElementClicked = function(e) {
	var url = "";
	if (e.target !== e.currentTarget && ((url = e.target.getAttribute("data-view")) || (url = this.findParentWithView(e.target)))) {
		// Don't set the URL to the same thing over and over
		if (url !== this.activePath) {
			// If the URL should change, do it here and fire the response
			history.pushState({}, "Nation", this.urlPrefix + url);
			// Provoke the page change in the same way as a pop state event
			this.onPopState();
		}
		e.stopPropagation();
		e.preventDefault();
	}
}

As any of the clicked element’s parents could have the data-view attribute, we also need to cycle up the parents and check those too:

Router.prototype.findParentWithView = function(element) {
	var url = "";
	// While element has a parentNode, check it for the data-view attribute
	while (element.parentNode && element.parentNode.getAttribute) {
		if (url = element.parentNode.getAttribute("data-view")) {
			return url;
		}
		// Assign the parent as the element, so we can keep checking parentNode in a loop
		element = element.parentNode;
	}
	return false;
}

The onPopState method just gets the path from the window’s location property, and loads it via an asynchronous request. Just as it’s starting to do this, it fires an event to elsewhere in the site’s code to make the transition animate in, which covers the current page completely.

Once a page load has completed, the newly loaded page HTML is thrown inside a div element created by JS (which is not inserted into the DOM), and then the page content (not including the header and footer, which were also loaded in the same request) is pulled out, and inserted into the live DOM. The relevant JavaScript view, figured out again by the window’s location property, is instantiated on the newly inserted HTML. The transition is then told to start hiding, revealing the newly inserted page.

Obviously this post is very top-level, and the approach has a limited use case in it’s current form. Here it only makes sense for sites that change the whole page on each load (header/footer aside), but it would be possible to expand it to load sections of pages instead, with some extra logic. The advantage is that the CMS can be built just like any other site - as far as it’s concerned the site is a traditional one. Let me know if you use a similar approach.