Polymer

Question

我正在使用 Shop 应用程序探索 Polymer (https://github.com/Polymer/shop)

在商店中-App.html定义了以下铁页。

  <iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
      <!-- home view -->
      <shop-home name="home" categories="[[categories]]"></shop-home>
      <!-- list view of items in a category -->
      <shop-list name="list" route="[[subroute]]" offline="[[offline]]"></shop-list>
      <!-- detail view of one item -->
      <shop-detail name="detail" route="[[subroute]]" offline="[[offline]]"></shop-detail>
      <!-- cart view -->
      <shop-cart name="cart" cart="[[cart]]" total="[[total]]"></shop-cart>
      <!-- checkout view -->
      <shop-checkout name="checkout" cart="[[cart]]" total="[[total]]" route="{{subroute}}"></shop-checkout>

      <shop-404-warning name="404"></shop-404-warning>
    </iron-pages>

在 "shop-list" 元素中，我添加了

 attached: function() {
                console.log("I am attached..");
},
detached: function() {
                console.log("I am detached..");
}

当我运行应用程序并访问商店列表视图时，在控制台中显示 "I am attached"。当我转到其他页面时，没有触发 shop-list 的 detach 事件。

如果我返回屏幕，商店列表视图中存储的任何数据都将保留。

如何避免这种情况？

我们可以在每次访问页面时创建一个新实例并清理页面更改时的逻辑吗？？

Answer 1

您可能需要的一切都是属性 page。每当这个属性发生变化时，你必须观察它并进行更改。所以像这样：

page: {
   type: String,
   value: "foo",
   observer: "_observePage"
},

然后定义一个名为_observePage

的函数

_observerPage: function(newValue, oldValue) {
   // handle logic like reset data and so on
}

函数 _observerPage 每次 page 属性改变时都会被调用。还有2个变量传递给函数，分别代表page

的新值和旧值

link 到文档：https://www.polymer-project.org/1.0/docs/devguide/observers

还有其他解决方案。就像使用 page.js 一样，可以在许多 Polymer 教程视频中看到。该库极大地简化了您的项目路由。您可以定义页面进入和页面退出的功能。

关于每次访问站点时的新实例：

解决方案是删除并重新创建该元素。例如

var list = document.querySelector("shop-list");
document.body.removeChild(list);

var newList = doucment.createElement("shop-list");
document.body.appendChild(newList);

Polymer - 页面更改时不会触发分离事件

Polymer - Detached event is not triggered when the page changes

persistence