重置聚合物页面的状态

Question

我有几个铁页，其中 'home' 是我的主页。它里面有一堆游戏卡片，当用户点击一张卡片时，它会开始一个带有一堆问题的测验。当我返回主页并再次单击卡片时，它不会开始测验。它只是从以前的状态继续。我怎样才能让它重新开始测验。以下是我的页面。我正在使用 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

我想你刚刚遇到了这个问题：PolymerElements/iron-pages#53

根据建议 in a comment, you can check out the iron-lazy-pages 支持 dom-if，因此其 restamp 功能。

更新：例子

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

注意：我还没有测试过这个例子，但它与 dom-if example on the iron-lazy-pages repo.

非常相似

Answer 2

iron-lazy-pages v2.2.1 运行不正常

我是这样用的"iron-page"，效果很好

      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>

完美运行

重置聚合物页面的状态

Reset the state of a page in polymer

polymer

polymer-2.0