erikringsmuth / app-router

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

Feature: Provide output as alternative to using loader #70

Open benjaminapetersen opened 9 years ago

benjaminapetersen commented 9 years ago

Was tinkering and came up with an interesting use case to throw out there. It would be interesting if, instead of loading elements or templates, a matching route could simply output its value. Code example:

<app-route
   path="/line/:lineId/load"
   output="{{output}}"></app-route>
// where output would look like:
{
    lineId: '<line_id>'
}

another with a little more complexity:

<app-route
   path="/foo/:foo/bar/:bar/baz/:shizzle"
   output="{{output}}"></app-route>
// where output would look like:
{
    foo: '<foo>',
    bar: '<bar>',
    shizzle: '<shizzle>',
}

What would be interesting here is that the user could implement whatever mechanism desired for generating UI. The <flatiron-director></flatiron-director> examples tend to go this route, passing the path out of flatiron, but not having the benefits of matching variables. They are always very simple from what I've seen.

So being able to do this:

  Polymer({
     outputChanged: function(oldVal, newVal) {
       // oldVal = the previous path match representation
       // newVal = the new match
       // I can map the route however I desire, binding to any number of 
       // other components...
       this.foo = newVal.foo; 
       this.bar = newVal.bar;
     }
  })

Its an interesting idea.

erikringsmuth commented 9 years ago

It's actually a really good idea. I've thought about that before too. I was thinking about completely splitting it into it's own element.

URL

/this/is/a/really/long/url?and=just&keep=going

Then put something like this in the page.

<url-parser path="/foo/:foo/bar/:bar/baz/:shizzle" model="{{url}}"></url-parser>

The Polymer element's this.url would look like this.

{
  "foo": "is",
  "bar": "really",
  "shizzle": "url",
  "and": "just",
  "keep": "going"
}

This way you could even do server-side routing and easily parse the URL.

benjaminapetersen commented 9 years ago

Dude! Exactly, that would be awesome. And Splitting it out into its own element is probably even better. The simplicity and flexibility would be really powerful.