Reloading page on every click using Polymer and app-route

Question

I am using app-route and iron-pages with a paper-toolbar to display my views.

On one of my views, main-view, displays a randomly chosen image which changes each time the page is loaded. Every time main-view is selected from the toolbar, the page should reload so that a new image will be shown.

The problem is, if I am already at the /main-view url and I select it from the toolbar it doesn't refresh the page. Is there any way to do this?

Answer 1

you should definitely add on-tap to render new images. Your image won't change, because iron-pages are observing some value (specified in selected property) so, when you click on main-view and route property already had value "main-view", observer will not trigger.

Adding on-tap on element that is handling changes will make it always trigger. Some easy example:

<iron-pages selected="{{route}}" attr-for-selected="name">
  <example-element name="main-view" on-tap="handleClick" id="main"></example-element>
  <another-element name="second-view"></another-element> 
</iron-pages>

and inside handleClick function something like:

handleClick: function() {
  this.$.main.renderImage();
}

Of course inside main-view element you can declare renderImage function which will handle rest of the logic

And don't forget to make some debounce since you don't want to propably render 20 new images in 1 second. You can use Polymer native debounce function You can read more about it here: https://www.polymer-project.org/1.0/docs/devguide/instance-methods