Routing in polymer 1.0

Question

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 I built are using ajax and periodically refresh the data. The problem with page.js routing that It seems it loads all custom elements even if the element is not viewed by user. so all custom elements are loading the data even if it is not needed. my questions:

1- How could I fix this so the the elements load data only when they are viewed by the end users? Should I change the routing to another options like more-routing?

2- if the user filled the data in one custom element , then clicked on link to another element. The data will remains when the user goes back to the first custom element? How could I reset the polymer and html elements in the custom element when the use back to an old view?

Answer 1

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-config driver="hash"></more-routing-config>
<more-route name="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-route id="route" context name="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.

Answer 2

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-config driver="hash"></more-routing-config>
<more-route name="one" path="/one"></more-route>
<more-route path="/two">
    <more-route name="two" path="/:name"></more-route>
</more-route>

Then the menu via:

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

And then the actual pages via:

<more-route-selector selectedParams="{{params}}">
  <iron-pages selected="0">
    <section route="one">
      <div> Page one </div>
    </section>
    <section route="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.

Answer 3

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-view
state='home'
element='home-template'></dna-view>

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

var params = this.params

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

Answer 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-location route="{{route}}">
</carbon-location>

<carbon-route route="{{route}}" pattern="/tabs/:tabName" data="{{data}}">
</carbon-route>

<paper-tabs selected="{{data.tabName}}" attr-for-selected="key">
  <paper-tab key="foo">Foo</paper-tab>
  <paper-tab key="bar">Bar</paper-tab>
  <paper-tab key="baz">Baz!</paper-tab>
</paper-tabs>

<neon-animated-pages selected="{{data.tabName}}"
                     attr-for-selected="key"
                     entry-animation="slide-from-left-animation"
                     exit-animation="slide-right-animation">
  <neon-animatable key="foo">Foo Page Here</neon-animatable>
  <neon-animatable key="bar">Bar Page Goes Here</neon-animatable>
  <neon-animatable key="baz">Baz Page, the Best One of the Three</neon-animatable>
</neon-animated-pages>

See also similar question: Polymer 1.0 - routing