Reset the state of a page in polymer

455 Views Asked by At

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

There are 2 best solutions below

6
LasaleFamine On BEST ANSWER

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.

1
Cedric Tanda On

iron-lazy-pages v2.2.1 don't work well

I used the "iron-page" like this, it works very well

      isEqual(val1, val2) {
        return val1 == val2;
      }
 <iron-pages selected="[[page]]" attr-for-selected="data-route" fallback-selection="view404" role="main">
      <!--User block-->
      <div data-route="login">
        <template is="dom-if" if="{{isEqual('login',page)}}" restamp>
          <user-login></user-login>
        </template>
      </div>
      <div data-route="view404">
        <template is="dom-if" if="{{isEqual('view404',page)}}" restamp>
          <my-view404></my-view404>
        </template>
      </div>
    </iron-pages>

it work perfectly