Polymer 使用聚合物和应用程序路线在每次单击时重新加载页面

我正在使用带有纸张工具栏的app route和iron页面来显示我的视图

在我的一个视图中，

主视图

，显示一个随机选择的图像，该图像在每次加载页面时都会更改。每次从工具栏中选择

main view

，页面都应重新加载，以便显示新图像

---

问题是，如果我已经在

/main view

url，并且我从工具栏中选择了它，它不会刷新页面。有什么方法可以做到这一点吗？

你一定要在点击时添加

，

来渲染新图像。您的图像不会更改，因为

iron pages

正在观察某个值（在

selected

property中指定），因此，当您单击主视图时，路由属性已经具有值“main view”，观察者将不会触发

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

<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>

当然，在

主视图

元素中，您可以声明

渲染

函数，该函数将处理其余的逻辑

不要忘了做一些去模糊处理，因为你不想在一秒钟内渲染20个新图像。您可以使用Polymer native

debounce

功能 你可以在这里了解更多信息：

你不应该做“硬重新加载”，因为

应用程序路径

是围绕一个新的应用程序设计的。相反，如果

selectedView==“main view”

，您应该观察您的

selectedView

道具并触发新的图像提取。此外，您还可以在工具栏的主视图按钮上点击添加一个

，

，并在点击时重新蚀刻&&

selectedView==“main view”

，这样即使在同一页面上，它也会重新加载-您可以与用户共享一个fiddle/JS bin吗？

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