aknuds1 / staterouter.js

Simple JavaScript HTML5 routing library built on top of History.js
22 stars 2 forks source link

Route urls including depth? #1

Closed macronomicus closed 11 years ago

macronomicus commented 11 years ago

Say I have a url blah.com/whats-up/calendar/some-calendar-node I have

.route('/whats-up', getWhatsUp)
.route('whats-up/calendar', getWhatsUpCal)

which both work fine but how would I route everything past "/whats-up" or past "whats-up/calendar" ? How would I route allowing for sub string variation? I looked around for a * wildcard or something similar but have found nothing yet.

aknuds1 commented 11 years ago

Hi

Could you please provide a concrete example of a route you would like to work and a corresponding callback function? StateRouter is very simplistic at the moment, so you've probably hit upon a (current) limitation.

Are you saying that route('/whats-up/calendar/some-calendar-node', getCalendarNode) doesn't work? I'll take a look at this tonight.

Arve

On Sat, Jan 26, 2013 at 6:28 AM, macrocosm144 notifications@github.comwrote:

Say I have a url blah.com/whats-up/calendar/some-calendar-node I have

.route('/whats-up', getWhatsUp).route('whats-up/calendar', getWhatsUpCal)

which both work fine but how would I route everything past "/whats-up" or past "whats-up/calendar" ? How would I route allowing for sub string variation? I looked around for a * wildcard or something similar but have found nothing yet.

— Reply to this email directly or view it on GitHubhttps://github.com/aknuds1/staterouter.js/issues/1.

macronomicus commented 11 years ago

A bit of what im doing with your router & history.js.... Its a single-page drupal website that still works without JS, my routes/callbacks trigger an ajax function and tweenMax scrollTo function, passing a variable of the proper container to perform the ajax and its position to tweenTo. With js disabled the site functions with old-school linked pages.

To your question... If I added exactly .route('/whats-up/calendar/some-calendar-node', getCalendarNode) it would work for that one node, but nodes are entered at random by site admins, each with differing node-title, which creates part of its url-alias. I need to route anything at a deeper level, in this case the third level after /whats-up/calendar/anything-here As far as I can see, if a url is not explicitly stated in a route, no route will happen? I notice that direct links wont fire either for the same reason.

Maybe a variable and/or some regex in the url spot? I'm still digging around but was wondering if you'd already implemented something similar, or if it was already possible. In your example how does the :id part of .route('/persons/:id', getPerson); work? Could that be the bit I should be using? lol :/

Cheers!

aknuds1 commented 11 years ago

How can your URLs vary exactly, is it only the calendar node part? If so, I think you should define your route like this: /whats-up/calendar/:id. Parts that start with ':' are supposed to be parameters that identify resources (a component of your URL), such as a calendar node. If you register a callback for the route /whats-up/calendar/:id, your callback should be called with a parameter corresponding to the last part of the URL; for example, /whats-up/calendar/1 would lead to your callback receiving 1 as its argument.

In practice, a route such as /whats-up/calendar/:id is stored as a regular expression like /whats-up/calendar/([^/]+) so that the parameter can be extracted from the URL and passed to your callback.

aknuds1 commented 11 years ago

To get a feel of what StateRouter is capable of, you might also want to consult its Jasmine specifications spec/StateRouterSpec.js. These are highly readable tests, and provide executable examples of StateRouter usage.

macronomicus commented 11 years ago

yeah nodes have a unique url string in the last part based on their title, the other url parts are based on node-type rules & the menu ive setup, it seems the router ignores /whats-up/calendar/*anything here
I tried the :id bit but it didnt seem to catch it. Thanks for the link I will look into that example, looks like theres a lot more code in there than the demo in the readme.

aknuds1 commented 11 years ago

Could be that you've hit a bug in the implementation of the path component recognition. Looking to fix it right now.

aknuds1 commented 11 years ago

I've revised the path component detection now, can you try to pull the latest Git commit and see if it works? If it still fails, please provide me with a route / path pair that doesn't work for you.

macronomicus commented 11 years ago

cheers! I will test it now

macronomicus commented 11 years ago

Sweet it worked! I didn't even have to change my code, though I still had the :id bit there like such

.route('/whats-up/calendar', getWhatsUp)
.route('/whats-up/calendar/:id', getWhatsUpDeeper)

Now the calendar loads in the proper box and all its internal links open within that box ... and direct linking works too! ....your awesome, this is so cool! :)

aknuds1 commented 11 years ago

Thank you for the positive feedback :+1: The library really needs more work, but until now it's only been driven by my own, limited, needs.

macronomicus commented 11 years ago

No problem, this made working with history.js a lot more dynamic... I appreciate that you shared your code, you rock!