Routing In Polymer 1.0

I am new to web development and building an application using polymer 1.0.4. I am using the page.js routing similar to the example in start kit. Now many of the custom element that

Solution 1:

Again, I'd recommend https://github.com/PolymerLabs/more-routing Eventually a 'carbon' (if I recall the name correctly) set of components will deal with this, according to the polymer summit videos, but until then this seems the standard approach.

Set up the pages via:

<more-routing-configdriver="hash"></more-routing-config><more-routename="one"path="/one"></more-route><more-routepath="/two"><more-routename="two"path="/:name"></more-route></more-route>

Then the menu via:

<more-route-selector><paper-menuselected="0"><paper-itemroute="{{urlFor('one')}}">One</paper-item><paper-itemroute="{{urlFor('two', {name: 'sup'})}}">Two</paper-item></paper-menu></more-route-selector>

And then the actual pages via:

<more-route-selectorselectedParams="{{params}}"><iron-pagesselected="0"><sectionroute="one"><div> Page one </div></section><sectionroute="two"><div> Page two: {{params.name}} </div></section></iron-pages></more-route-selector>

I used it when it was under the Polymore repository on github, and the samples above are from such, but it doesn't seem to have changed that much in its new home.

After you've set up the basics, listen for changes on the iron-pages, such as events that are available here. In such listeners, you can load the data for each section in iron-pages. One approach would be to use such listeners to call a method of a custom element, perhaps using a behaviour, that then brings down the data.

Solution 2:

Try dna-router. You can create define states and routes in HTML only.

Setup routes by:

<dna-new-state state='home' route='/home'></dna-new-state> <dna-new-state state='user' route='/user/:id/'></dna-new-state>

Create views by:

<dna-viewstate='home'element='home-template'></dna-view>

You can get all params inside your home-template polymer properties.

varparams = this.params

For a detailed documentation, visit : https://github.com/Saquib764/dna-router

Solution 3:

Firstly, the PolymerLabs/more-routing library is a nice alternative to page.js and is quite easy to implement. As this library is more declarative you can do things like:

routes.html

<more-routing-configdriver="hash"></more-routing-config><more-routename="myRoute"path="/my-route-path/:id"></more-route>

app-element.html

<dom-module id="app-element">
  <style>
    iron-selector > * {
      display: none;
    }
    iron-selector > .iron-selected {
      display: block;
    }
  </style><template><more-route-selector><iron-selector><x-element></x-element></iron-selector></more-route-selector></template><script>Polymer({ ... });</script>
</dom-module>

x-element.html

<dom-module id="x-element">
  <template><more-routeid="route"contextname="myRoute"params="{{params}}"active="{{activeRoute}}"></more-route></template><script>Polymer({
      is: 'x-element',
      observers: [ '_paramsChanged(activeRoute, params.id)' ],

      _paramsChanged: function(activeRoute) {
        if (activeRoute) {
         // Active route
        } else {
         // Inactive route
        }
      }
    })
  </script>
</dom-module>

Check out the polyfora app in the demo folder of the repository.

Otherwise, to use page.js I would consider:

• Remove any auto iron-ajax queries in custom elements;
• Pass a state attribute to custom elements;
• Add an observer to any state changes within each custom element which triggers a function to run any iron-ajax queries.

Solution 4:

As of Polymer 1.4, carbon-route (later renamed app-route) can be used:

• https://github.com/polymerelements/carbon-route
• https://blog.polymer-project.org/announcements/2016/03/28/carbon-route-released/
• https://www.polymer-project.org/1.0/articles/routing.html

Here's an example taken from the polymer blog:

<carbon-locationroute="{{route}}"></carbon-location><carbon-routeroute="{{route}}"pattern="/tabs/:tabName"data="{{data}}"></carbon-route><paper-tabsselected="{{data.tabName}}"attr-for-selected="key"><paper-tabkey="foo">Foo</paper-tab><paper-tabkey="bar">Bar</paper-tab><paper-tabkey="baz">Baz!</paper-tab></paper-tabs><neon-animated-pagesselected="{{data.tabName}}"attr-for-selected="key"entry-animation="slide-from-left-animation"exit-animation="slide-right-animation"><neon-animatablekey="foo">Foo Page Here</neon-animatable><neon-animatablekey="bar">Bar Page Goes Here</neon-animatable><neon-animatablekey="baz">Baz Page, the Best One of the Three</neon-animatable></neon-animated-pages>

See also similar question: Polymer 1.0 - routing