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>

LasaleFamine · Accepted Answer · 2018-03-08T20:39:21.460

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.

edited Mar 08 '18 at 20:39

answered Mar 08 '18 at 19:03

LasaleFamine

613
6
12

how does that work for multiple pages. This seems to be for multiple tabs. How can I specify it for my-game page – user3310115 Mar 08 '18 at 19:56
Using the `attr-for-selected="data-route"` attribute of the `iron-lazy-pages`, you can wrap your page inside a `dom-if` e add the `restamp` attribute wherever you need. – LasaleFamine Mar 08 '18 at 20:32
do I need to use – user3310115 Mar 08 '18 at 20:38
I have added an example. You need the ` – LasaleFamine Mar 08 '18 at 20:40
It worked thanks. But can you tell me how to do it manually. I tried using `_visibleChanged` like below – user3310115 Mar 09 '18 at 07:57
_visibleChanged() { new Game() }; – user3310115 Mar 09 '18 at 07:57

Cedric Tanda · Answer 2 · 2018-07-09T21:52:28.113

1

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

edited Jul 09 '18 at 21:52

answered Jul 09 '18 at 21:46

Cedric Tanda

21
2

Welcome to Stack Overflow! Please don't answer just with LINKS. Try to provide a nice description about how your solution works. See: [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer). Thanks – sɐunıɔןɐqɐp Jul 09 '18 at 21:52

Reset the state of a page in polymer

2 Answers2