Polymer Routing

[Andrew Huth]

For anyone looking for client-side routing, I've made a collection of Polymer elements called <app-router>.

To use it, you set up routes (the target attribute specifies where views will get rendered into):

<app-router target="#main">
  <app-route to="index">/</app-route>
  <app-route to="contact">/contacts/:id</app-route>
</app-router>

And then you set up views that correspond to the to attributes on the routes:

<app-views>

  <template name="index">
    <p>This is the main page</p>
  </template>


  <template name="contact">
    <p>This is contact {{ id }}</p>
  </template>

</app-views>

Url parameters (in this example 'id') get passed into the views.

What are your guy/gal's thoughts on this? I'm not a big fan of having the view definitions on the page. Not sure how else to do it, though. This is also my first Polymer element, so it may not be as Polymeric as it could be. Any pointers on that are greatly appreciated.

Finally, how should this be packaged? It's really a collection of 3 Polymer elements. Should they be separate, or combined into one package together?

<app-router>, <app-route>, and <app-views> are all available at github.com/ahuth/app-router. Get it while supplies last!

P.S. This is a rewrite of an earlier post (now deleted) because I didn't like how I worded it before.

[Andrew Huth]

To clarify, a route of /contacts/1 will activate the /contacts/:id route, and the 1 will get passed to the view.

[Addy Osmani]

Thanks for sharing your work. Routing and state management are really interesting because there are a few different ways they can be handled.  I've seen people:

• Define the views directly inside the page
• Define views/files in separate files, but load them all as part of your initial page bundle. Instantiate as needed.
• Dynamically load views on-demand 

I don't think there's a single golden answer here. It depends on what you're trying to do.

Imo, you should ask yourself what elements in your current package could realistically be used independently. It would appear (without closer study) that <app-router> and <app-route> are somewhat coupled to this element so packaging them together at minimum seem to make sense. How would one interact with <app-views> if not with the other elements? If it's not practical to, it might make sense to bundle it along with the others.

You're possibly already aware of these related projects, but there's a Polymer element for Flatiron and I've also written one for handling routing by reacting to `fire`d events on route change. These are more generalized solutions that leave it up to the end developer to figure out how views should appear/be loaded in, however I'm sure there's scope for something more opinionated too! 

[Addy Osmani]

Btw, navigating to http://ahuth.github.io/app-router/contacts/1 http://ahuth.github.io/app-router/contacts etc. result in 404s. I imagine your intention was for routes to also be bookmarkable so it may be useful to try working on a fix for this :)

On Friday, 14 March 2014 21:23:26 UTC, Andrew Huth wrote:

[Andrew Huth]

Thanks for your feedback.

I did see flatiron-director and your own x-route out there, but wanted something that uses push state instead of hash-fragments for routing. I didn't dive too deep into flatiron or x-route, though, so for all I know, they do support that.

<app-router> fires off events which <app-views> listens for, so I'm thinking now my time will be better spent coming up with something that can piggy back off of x-router to swap the views in and out. No need to reinvent the wheel.

[Andrew Huth]

Yeah, I would want links to be bookmarkable. I didn't view this as a problem here, though. If the example was a Rails app (or any server-side framework, really), I would point all those routes (on the server) to one controller/view, which would load the app.

The entire url would still make its way to the client, though, and the app/router would read that and render things properly.

But because the example is on Github Pages, it's not feasible (that I know of).

[Keith Garrod]

The above link to app-router is broken, here is a working link to <app-router> (thanks Rob).

[Andrew Huth]

The above link is not the same project as the new link you provided... Having said that, this new one looks way better than the original one I came up with. In fact, my original one (which is the original link above) has been deleted. Whoever made the one you linked to did a really nice job, and I would use it instead of my old one.

[niladri...@gmail.com]

Hi,
I am using more-routing to navigate between pages (core-pages and sections) which is working fine. Now I want to go one step ahead with more-routing parameters to pass from one element to another and based on that a JSON string would be filtered in the second element to show up the desired output.

Here is what I am trying:

<template repeat="{{customer in customers}}">
          <section route="customers">
            <div class="single-customer-info">
                <p><a title="{{customer.name}}" href="{{urlFor('customer-detail', {cust: customer.cuname})}}" class="customer-name">{{customer.name}}</a></p>
            </div>
          </section>
</template>

which when renders creates URLs of the following pattern:

http://localhost:9000/#!/customers/cyfox

"cyfox" is the key for the second element which I want to grab and pick up the correct data from the following JSON and finally display it on screen.

this.custDetails = [
                    { "cuname": "cyfox", "name": "Cyfox Papers Ltd.", "addr": "2, Strand Road", "addr2": "Kolkata, IN", "phone": "332.245.9910", "desc": "A leading paper merchant of Eastern India", "braches": [
                            { "email": "x...@cyfoxpapers.com", "phone": "1582012244", "address": "69/A, Twisted Road, Banjara Hills, Hyderabad: 600001", "code": "CPHYD" }
                        ]
                    },
                    { "cuname": "indplast", "name": "India Plastics", "addr": "6/B, Pragati Apartment", "addr2": "Pitampura, New Delhi, IN", "phone": "493.050.2010", "desc": "We convert Indian plastic products international", "braches": [
                            { "email": "x...@indiaplastic.co.in", "phone": "913345678900", "address": "25, Bamungachi Lane, Alipore. Kolkata - 705660", "code": "INDPKOL" },
                            { "email": "xxx@indiaplastic.co.in", "phone": "9133210056", "address": "Sevak Tower, 1st Floor. Sevak Road, Siliguri", "code": "INDPSGR" }
                        ]
                    }
                ];

But I don't know how to pass this "cyfox" as the parameter to the second element (customer-detail).
I went through the Polycast series by Rob Dodson on YouTube, specially the one for more-routing. I am also referring to https://www.polymer-project.org/0.5/articles/spa.html but no where I could see how parameter could be passed across different elements (or I did not understand!).

Please help. Thanks in advance.

Subrata

[James Nadeau]

Subrata,

Take a look at app-router:

https://github.com/erikringsmuth/app-router

I used this in the past for routing in polymer, although that was the .5 version. Makes for easy single page apps. 

[Ian MacLeod]

But I don't know how to pass this "cyfox" as the parameter to the second element (customer-detail).

To do this with more-routing, you'll probably want to create a <more-route> element and bind to its params inside your <customer-detail>. There's a good example of this in the more-routing demo:

https://github.com/PolymerLabs/more-routing/blob/v0.5.0/demo/polyfora-user.html#L8

Or you can pass the value in from outside your element, something like this:

<more-route-selector selectedParams="{{params}}">
  <core-pages>
    <customer-detail route="customer-detail" customerId="{{params.cuname}}"></customer-detail>
    <!-- ... -->
  </core-pages>
</more-route-selector>

 

the one for more-routing. I am also referring to https://www.polymer-project.org/0.5/articles/spa.html but no where I could see how parameter could be passed across different elements (or I did not understand!).

Please help. Thanks in advance.

Subrata

On Saturday, 15 March 2014 02:53:26 UTC+5:30, Andrew Huth wrote:

For anyone looking for client-side routing, I've made a collection of Polymer elements called <app-router>.

To use it, you set up routes (the target attribute specifies where views will get rendered into):

<app-router target="#main">
  <app-route to="index">/</app-route>
  <app-route to="contact">/contacts/:id</app-route>
</app-router>

And then you set up views that correspond to the to attributes on the routes:

<app-views>

  <template name="index">
    <p>This is the main page</p>
  </template>


  <template name="contact">
    <p>This is contact {{ id }}</p>
  </template>

</app-views>

Url parameters (in this example 'id') get passed into the views.

What are your guy/gal's thoughts on this? I'm not a big fan of having the view definitions on the page. Not sure how else to do it, though. This is also my first Polymer element, so it may not be as Polymeric as it could be. Any pointers on that are greatly appreciated.

Finally, how should this be packaged? It's really a collection of 3 Polymer elements. Should they be separate, or combined into one package together?

<app-router>, <app-route>, and <app-views> are all available at github.com/ahuth/app-router. Get it while supplies last!

P.S. This is a rewrite of an earlier post (now deleted) because I didn't like how I worded it before.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/78925055-cf2e-4296-bf18-fc5b8e002104%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Subrata Sarkar]

Hi Ian,

Sending value through attribute worked like a charm!! It is "the" thing I was looking for. :)

<customer-detail route="customer-detail" customerId="{{params.cuname}}"></customer-detail>

Thanks for your help!

--

Thanks and Regards,

Subrata Sarkar
Skype: NiladriSirkar72
US: +1 (202) 556-3514 , +1 (202) 506-9125
India (Fixed) : +91 33 2663 6462 | India (Mobile) : +91 94327 50266, +91 98319 33166

[saquib...@gmail.com]

Hello guys,

I have written an angular style polymer router 'dna-router'. I believe its simpler than other routers available. I am still adding more advance features.

Link:

https://github.com/Saquib764/dna-router

Review and suggestions are welcomed.

Thanks.