Question

我正在使用app-route和带有纸质工具栏的铁页来显示我的观点。

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

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

Answer 1

你绝对应该添加on-tap来渲染新图像。您的图像不会发生变化，因为iron-pages正在观察某个值（在selected属性中指定），因此，当您单击主视图并且路径属性已经具有值＆＃34; main- view＆＃34;，观察者不会触发。

在处理更改的元素上添加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张新图像。您可以使用Polymer native debounce函数您可以在此处详细了解：https://www.polymer-project.org/1.0/docs/devguide/instance-methods

使用Polymer和app-route重新加载每次点击的页面

1 个答案: