使用Polymer和app-route的每次点击都会重新加载页面 [英] Reloading page on every click using Polymer and app-route

问题描述

我正在使用带有纸张工具栏的应用程序路由和铁页来显示我的视图.

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

在我的其中一个视图中，main-view显示了一个随机选择的图像，该图像在每次加载页面时都会更改.每次从工具栏中选择main-view时，页面均应重新加载，以便显示新图像.

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.

问题是，如果我已经在/main-view网址上，并且从工具栏中选择了它，那么它不会刷新页面.有什么办法吗?

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?

推荐答案

您绝对应该添加on-tap来呈现新图像.您的图像不会改变，因为iron-pages正在观察某个值(在selected属性中指定)，因此，当您单击主视图并且route属性已经具有值主视图"时，观察者将不会触发.

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.

添加正在处理更改的on-tap元素将使其始终触发. 一些简单的例子:

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>

和handleClick内部的功能类似:

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

当然，您可以在main-view元素内声明renderImage函数，该函数将处理其余逻辑

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

也不要忘记进行一些反跳操作，因为您不想在1秒钟内适当渲染20张新图像.您可以使用Polymer native debounce函数 您可以在此处了解更多信息: https://www.polymer- project.org/1.0/docs/devguide/instance-methods

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

这篇关于使用Polymer和app-route的每次点击都会重新加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！