Reset the state of a page in polymer

Question

I have a a few iron pages where 'home' is my home page. It has a bunch on game cards in it and when the user clicks on a card, it will start a quiz with a bunch of questions. When I go back to the home page and click on a card again, it doesn't start the quiz. It just continues from the previous state. How can I make it start the quiz again. Below are my pages. I'm using the starter kit from Polymer

<iron-pages
  selected="[[page]]"
  attr-for-selected="name"
  fallback-selection="view404"
  selected-attribute="visible"
  role="main"
>
  <my-home name="home"></my-home>
  <my-login name="login"></my-login>
  <my-view3 name="view3"></my-view3>
  <my-view404 name="view404"></my-view404>
  <my-game name="game"></my-game>
</iron-pages>

Answer 1

I think you just had this issue: PolymerElements/iron-pages#53

As suggested in a comment, you can check out the iron-lazy-pages that has support for dom-if and so its restamp feature.

UPDATE: example

<iron-lazy-pages
  selected="[[page]]"
  attr-for-selected="data-route"
  fallback-selection="view404"
  selected-attribute="visible"
  role="main">
    <template is="dom-if" data-route="home" restamp>
      <my-home></my-home>
    </template>

    ...
</iron-lazy-pages>

NOTE: I haven't tested the example, but it's really similar to the dom-if example on the iron-lazy-pages repo.