Add restamp property and hide elements by default

iron-lazy-pages.html

@@ -162,6 +162,19 @@
         hideImmediately: {
           type: Boolean,
           value: false
+        },
+
+        /**
+         * When true, elements will be removed from DOM and discarded when
+         * the page path does not match anymore and re-created and added back
+         * to the DOM when the page path matches again.
+         * By default, stamped elements will be hidden but left in the DOM
+         * when a page path does not match anymore, which is generally results
+         * in better performance.
+         */
+        restamp: {
+          type: Boolean,
+          value: false
         }
       },
 
@@ -176,7 +189,7 @@
           return;
         }
         if (this.hideImmediately) {
-          event.detail.item._hide();
+          event.detail.item._hide(this.restamp);
         } else {
           this._lastSelected = event.detail.item;
         }
@@ -229,6 +242,7 @@
         var onImportFinished = function() {
           cb();
           this._stamp();
+          this._instance._showHideChildren(this.__hideTemplateChildren__);
         }.bind(this);
 
         if (!this.loaded && this.path) {
@@ -306,17 +320,21 @@
         });
       },
 
-      _hide: function() {
+      _hide: function(restamp) {
         if (this._instance) {
-          var c$ = this._instance._children;
-          if (c$ && c$.length) {
-            // use first child parent, for case when dom-if may have been detached
-            var parent = Polymer.dom(Polymer.dom(c$[0]).parentNode);
-            for (var i=0, n; (i<c$.length) && (n=c$[i]); i++) {
-              parent.removeChild(n);
+          if (restamp) {
+            var c$ = this._instance._children;
+            if (c$ && c$.length) {
+              // use first child parent, for case when dom-if may have been detached
+              var parent = Polymer.dom(Polymer.dom(c$[0]).parentNode);
+              for (var i=0, n; (i<c$.length) && (n=c$[i]); i++) {
+                parent.removeChild(n);
+              }
             }
+            this._instance = null;
+          } else {
+            this._instance._showHideChildren(true);
           }
-          this._instance = null;
         }
       }
     })

test/basic-test.html

@@ -54,19 +54,25 @@
             assert.equal(path, expectedPath);
             callbackSuccess = function() {
               onSuccess({
-                srcElement: element
+                target: element
               });
             }
             callbackFailure = function() {
               onFailure({
-                srcElement: element
+                target: element
               });
             }
           };
         }
 
-        function assertStamped(content) {
-          assert.equal(Polymer.dom(pages).firstElementChild.textContent, content);
+        function assertStamped(content, i) {
+          i = i || 0;
+          var node = Polymer.dom(pages).firstElementChild;
+          while (i > 0) {
+            node = Polymer.dom(node).nextElementSibling;
+            i--;
+          }
+          assert.equal(node.textContent, content);
         }
 
         this.timeout(500);
@@ -111,6 +117,7 @@
 
         test('immediately hides when switched', function() {
           pages.hideImmediately = true;
+          pages.restamp = true;
           fakeImport(0, 'foo.html');
           pages.select('foo');
           callbackSuccess();
@@ -128,6 +135,18 @@
             done();
           }, 10);
         });
+
+        test('after restamping shows element again', function() {
+          fakeImport(0, 'foo.html');
+          pages.select('foo');
+          callbackSuccess();
+          fakeImport(1, 'bar.html');
+          pages.select('bar');
+          callbackSuccess();
+          fakeImport(0, 'foo.html');
+          pages.select('foo');
+          assertStamped('Foo', 1);
+        })
       });
     </script>