search

erikringsmuth / app-router

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

Global route location url builder #105

Open teckays opened 9 years ago

teckays commented 9 years ago

Would be really nice to have some global methods to build urls programatically using PolymerExpressions.prototype.routeURL('name|path', 'params') (for example). Using document.querySelector('app-router').go('/home'); is not always possible, (unless you import app-router on every page), and it does not allow you to pass route parameters into it.

erikringsmuth commented 9 years ago

Would the bindRouter attribute help in your case https://erikringsmuth.github.io/app-router/#/databinding/#bindrouter-attribute? It'd be tricky making a global method since it currently relies on the instance of the router to tell if it needs to build a hash URL or regular URL.

teckays commented 9 years ago

Hm, looks promising, does it work with page import? <app-route [name="demo"]? path="/demo/:pathArg1" import="/pages/demo-page.html" bindRouter ></app-route>. Asking just for information purposes, not a big deal to use element instead of import if it doesn't.

Following bindRouter principle to access app-router methods, can we add the url builder feature? ex. path="/view/:category/:book_id" method: this.router.url('name', {"category": "books", "book_id": 12345}), return: /view/books/12345.

Also would be nice to refer routes by name instead of path ex. this.router.go('demo'). In case if route path changes so we won't have to update it all over the place.

Thank you for the answer. Would love to contribute myself but working extra-full time on a project.

erikringsmuth commented 9 years ago

Yep, you can combine it with an imported page.

<app-route path="/customer/:customerId" import="/pages/customer-page.html" element="customer-page" bindRouter></app-route>

I've left out named routes on purpose. I know a lot of routers have them but I see it as redundant features since a URL is inherently unique. Paths don't change that often in the real world and a find/replace on a URL is the same amount of work as on a named route.

The URL builder requires named routes and I don't think it buys too much since it'd just concatenate a few strings.

erikringsmuth commented 9 years ago

The other tricky part of a URL builder is when the path has wildcards like /customer/*/order/:orderId.

teckays commented 9 years ago

Yeah, it's true. Will use it as is for now, if needed, will add some helpers just to fit my case.

Maybe off topic, but don't want to open a new issue for this, you can move it if you think it's needed, I've played all day with the core-list and could not get it to work inside the layout you have used for your demo page. I have no idea why but it's not rendered on the screen. Have you tried using it? I know core-list lies strictly on some parent height rules when <app-router> and the following <home-page> page elements have 0 height. Could you give it a try and maybe post an example of it in demo?

Thank you.