1

I try to use a Router from route_hierarchical/client.dart to listen to an onpopstate event and enable/disable a <div> in my index.html. (Example in stagehand.pub dart plugin) If this is done via normal <a href="/relativePath"> in index.html, it works. But if I try to change the path via a button.onClick.listen() handler in which I call:

window.location.assign('/relativePath');

I get 404 and the router is not handling my event properly. Should that that action not invoke a popstate event which is caught by Router like described here?

handlers.dart

...
button.onClick.listen((_){
   window.location.assign('/about');
});

...

router.dart

var router = new Router();
  router.root
    ..addRoute(name: 'about', path: '/about', enter: showAbout)
    ..addRoute(name: 'login', defaultRoute: true, path: '/', enter: showLogin)
    ..addRoute(name: 'context', path: '/context', enter: showContext);
  router.listen();
}

void showAbout(RouteEvent e) {
  // Extremely simple and non-scalable way to show different views.
  querySelector('#login').style.display = 'none';
  querySelector('#about').style.display = '';
  querySelector('#context').style.display = 'none';
} ...

index.html

...
<form>
    <button type="button" id="submit" disabled="true" >
        Login
    </button>
</form>
...
raptaML
  • 140
  • 8
  • Looks like a bug, please report at http://dartbug.com). You can try `window.location.href = xxx` (see also http://stackoverflow.com/questions/13109233) – Günter Zöchbauer Apr 01 '15 at 14:07
  • Thank you for your response, I have seen that post before but unfortunately href setter does not work either :-( – raptaML Apr 01 '15 at 14:31

2 Answers2

1

onPopState is the wrong event. This event is only fired if you navigate to an existing history entry (back, forward, pushState, go to 2nd entry in history). What you are looking for is probably the window.onHashChange event.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Looks like I got that wrong, but shouldnt that be handled ineternally by Router? – raptaML Apr 01 '15 at 14:45
  • It depends on the router configuration (I'm no specialist in this matter either). You can enable usePushState. Depending on this setting you have to use URL fragments (`http://example.com/index.html#someroute`) or whole URLs for representing routes (like `http://example.com/someroute`) which needs server support if you load ressources. The URL you set need to match a route according to this schemes. – Günter Zöchbauer Apr 01 '15 at 14:50
  • If you use route_hierarchical directly it's `useFragment` instead of `usePushState` when you use it from Angular.dart (see for example https://github.com/angular/route.dart/blob/cc252ffd37944a438f707482fa3bd8aa98a9ae59/example/basic/example.dart#L15). – Günter Zöchbauer Apr 01 '15 at 14:58
1

OK looks like I am not achieving my goal with assuming the above behavior.

Thanks to Günther Zöchbauer for helping. I filed it with corresponding Github project as I think it should work.

What I now use and what works including history support is

router.gotoUrl('/relativePath')

in the onButtonClick handler. That totally does it.

raptaML
  • 140
  • 8