Search code examples
polymerpersistence

Polymer - Detached event is not triggered when the page changes

I am exploring Polymer with the Shop Application (https://github.com/Polymer/shop)

In the Shop-App.html following iron-pages are defined.

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

In the "shop-list" element, I have added 

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

When I run the application, and visit the Shop-List view, in the console, "I am attached" is shown. When i go to other pages, shop-list's detach event is not triggered.

And whatever data that is stored in the Shop-List view will persist if I go back to the screen.

How to avoid this?

Can we have a new instance created each time the page is visited and clean up the logic on page change??

Solution

  • Everything you will propably need is property page. Whenever this property change, you have to observe it and make changes. So something like this:

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

    and then define a function called _observePage

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

    function _observerPage is called everytime when page property changes. There are also 2 variables passed to the function, represents new value and old value of page

    link to documentation: https://www.polymer-project.org/1.0/docs/devguide/observers

    There are another solutions. Like using page.js which can be seen in many Polymer tutorial videos. This library simplify your project routing very much. You can define functions for page enter and page exit.

    And about new instance every time you visit site:

    Solution would be delete and re-create that element. For example

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

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