Routing does not switch away from a constantly updating page

[zywind]

I have routes defined like the following. The foo page updates every second.

const routes = {
  '/': h('h1', {}, 'Home'),
  '/test': h('h1', {}, 'test'),
  '/foo': function() {
    return {
      DOM: Rx.Observable.interval(1000).map(i=>h('div', i+''))
    }
  }
};

I use cycle-starter's code to handle the view switch:

function createRouteValue(sources) {
  return function getRouteValue(location) {
    const {value} = switchPath(location.pathname, routes);
    console.log(location.pathname);
    if (typeof value === `function`) {
      const dialogue = value(sources);
      return dialogue;
    }
    return value;
  };
}

function main(sources) {
  const contentView$ = sources.History.map(createRouteValue(sources))
    .flatMap(value => {
      if (value.DOM) {
        return value.DOM;
      }
      return Rx.Observable.just(value);
    });

  const navButtons = NavButtons(sources);

  const view$ = Rx.Observable.just(h('div', [contentView$, navButtons.DOM]));

  return {
    DOM: view$,
    History: navButtons.url$
  };
}

The problem is that once I switch into the foo page, I can't navigate away. I can temporarily navigate to another page, and the location bar updates too, but the foo page always comes back.

[zywind]

Alright, I found a solution. I should use flatMapLatest rather than flatMap.

[TylorS]

Glad you were able to solve your problem! It always feels nicer when you do. Is there anything else I can help you with?

[zywind]

Yeah, I feel like I'm finally getting the hang of Rx. I can close the issue now.