Polymerとapp-routeを使用してクリックするたびにページを再読み込みします。

Question

私はビューを表示するためにペーパーツールバーでapp-routeとiron-pagesを使用しています。

私の意見の1つであるmain-viewには、ページが読み込まれるたびに変更されるランダムに選択されたイメージが表示されます。ツールバーのmain-viewが選択されるたびに、新しいイメージが表示されるようにページがリロードされます。

私が既に/main-view URLにいて、それをツールバーから選択すると、ページが更新されないという問題があります。これを行う方法はありますか？

Answer 1

新しい画像を表示するには、on-tapを必ず追加してください。 iron-pagesは何らかの値（selectedプロパティで指定されている）を観測しているため、画像は変更されません。したがって、メインビューとルートプロパティをクリックしたときに値が "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> 

と​​関数の内部のようなもの：main-view要素内

もちろん

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

あなたはロジック

の残りの部分を処理ドン」になるrenderImage関数を宣言することができます1秒間に20個の新しい画像を適切にレンダリングしたくないので、いくつかのデバウンスを忘れないでください。あなたはポリマーのネイティブを使用することができますdebounce関数 https://www.polymer-project.org/1.0/docs/devguide/instance-methods