Question

我正在使用Shop Application（https://github.com/Polymer/shop）

探索Polymer

在Shop-App.html中定义了铁页。

getdbmodel

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

  <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视图时，在控制台中显示“我已连接”。当我转到其他页面时，不会触发商店列表的分离事件。

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

如何避免这种情况？

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

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

的新值和旧值

指向文档的链接：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);

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

1 个答案: