Routing in TVML app using Page.js

genreView.js

import genreTemplate from 'templates/genre.tvml.jade';
import get from 'lib/api/get';
import tvOS from 'lib/tvOS';

export default function tvSeriesView({params}) {
  get(`/genres/${params.genreSlug}`).then((viewData) => {
    const doc = genreTemplate(viewData);
    tvOS.pushDocument(doc);
  });
}

homeView.js

import homeTemplate from 'templates/home.tvml.jade';
import get from 'lib/api/get';
import handleNavigation from 'lib/router';

export default function homeView({state}) {

  // Get the required values from state. state.menuFeature comes from the menuBarMiddleware
  const {menuFeature, event} = state;

  get('home').then((viewData) => {
    const doc = homeTemplate(viewData);

    // Because we arent presenting this using the tvOS helper module, we need to manually
    // add event listners
    doc.addEventListener('select', handleNavigation);
    doc.addEventListener('play', handleNavigation);

    // Use the MenuBarDocument feature to set this view as the active document,
    // associating it with the correct <menuItem>
    menuFeature.setDocument(doc, event.target);
  });
}

pushDocument.js

export default tvOS = {
  pushDocument(doc) {
    doc.addEventListener('select', handleNavigation);
    doc.addEventListener('play', handleNavigation);

    navigationDocument.pushDocument(doc);
  },
}

router.js

// Note page.js expects to be in a browser, so you must stub/shim:
//   document = {}
//   history = {pushState: function() {}}
// before you call page.js. I used webpack to do this.
import page from 'page';

page('/', menuBarMiddleware, homeView);
page('/genres', menuBarMiddleware, genresIndexView);
page('/tv-shows', menuBarMiddleware, tvSeriesIndexView);
page('/genres/:genreSlug', genreView);
page('/:tvSeriesSlug/:seasonSlug?', seasonView);

export default function handleNavigation(event) {
  const ele = event.target;
  const webUrl = ele.getAttribute('webUrl');

  // Because this event listener is triggered when _every_ item selected,
  // we must make sure we ignore events without a webUrl.
  if (!webUrl) {
    return;
  }

  page(webUrl, {event});
}