search

erikringsmuth / app-router

Router for Web Components
https://erikringsmuth.github.io/app-router/
MIT License
610 stars 83 forks source link

Q: How do I integrate app-router with tabs? #49

Closed zond closed 9 years ago

zond commented 9 years ago

I have a <paper-tabs> controlling a <core-animated-pages>, and while it's easy to make the right page in the <core-animated-pages> display on load, depending on the path in the browser, I can't figure out how to change page in the <core-animated-pages> using the <paper-tabs> (and get the pretty animation of the <core-animated-pages>) while at the same time pushing the state to make bookmarking, sharing and reloading work as intended.

What is the best practice?

erikringsmuth commented 9 years ago

Hey @zond, I put together an example here https://github.com/erikringsmuth/paper-tabs-app-router/tree/master.

The tricky part was getting the selecting the correct paper-tab using the active route's path.

zond commented 9 years ago

Ah, thanks for the example! I was stuck in the idea of the app-router having to exist on the top level of the app, routing the entire window. Of course, if each component with a state sensitive content contains its own app-router that makes much more sense.

But I was unable to make your example work - my paper-tabs captured the click event, I think, because the links never seemed to make a difference.

What I did in the end was https://github.com/zond/diplicity/blob/martin/polymer-experiments/components/diplicity-app/diplicity-app.html (sorry about the indentation, my vim is setup for golang which uses tabs by convention), which works really well.

I just setup the paper-tabs in ready from window.location.pathname, and then in pathChanged I do a ...router.go(this.path);

erikringsmuth commented 9 years ago

Yep, router.go() works too!