使用聚合物和app-route在每次点击时重新加载页面

Question

我正在使用app-route和iron-pages和一个纸质工具栏来显示我的视图。

在我的一个视图main-view上，显示了一个随机选择的图像，该图像在每次加载页面时都会发生变化。每次从工具栏中选择main-view时，页面都会重新加载，以便显示新图像。

问题是，如果我已经在/main-view url上并从工具栏中选择它，它不会刷新页面。有没有办法做到这一点？

Answer 1

你绝对应该添加on-tap来渲染新的图像。你的图像不会改变，因为iron-pages正在观察一些值(在selected属性中指定)，所以，当你点击main-view并且路由属性已经有值"main-view“时，观察者将不会触发。

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

<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函数，它将处理其余的逻辑

别忘了做一些去抖动，因为你不想在1秒内渲染20个新图像。您可以使用聚合物原生debounce函数，您可以在此处阅读更多信息：https://www.polymer-project.org/1.0/docs/devguide/instance-methods