Re-insert rows when re-attaching. Fixes #1498.

Polymer · Jun 4, 2015 · c2eb14e · c2eb14e
1 parent bd93dd3
commit c2eb14e
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 3 deletions.
diff --git a/src/lib/template/dom-repeat.html b/src/lib/template/dom-repeat.html
@@ -205,7 +205,15 @@
           this._detachRow(i);
         }
       }
-      this.rows = null;
+    },
+
+    attached: function() {
+      if (this.rows) {
+        var parentNode = Polymer.dom(this).parentNode;
+        for (var i=0; i<this.rows.length; i++) {
+          Polymer.dom(parentNode).insertBefore(this.rows[i].root, this);
+        }
+      }
     },
 
     ready: function() {

diff --git a/test/unit/dom-bind.html b/test/unit/dom-bind.html
@@ -157,7 +157,7 @@
       test('move dom-bind', function() {
         domBind.parentElement.removeChild(domBind);
         // TODO(kschaaf): detached/attached not called if takeRecords isn't
-        // called between remove & insert on polyfill... seems bad?
+        // called between remove & insert on polyfill... See wcjs #311.
         CustomElements.takeRecords();
         container.appendChild(domBind);
         CustomElements.takeRecords();

diff --git a/test/unit/dom-repeat.html b/test/unit/dom-repeat.html
@@ -29,7 +29,7 @@ <h4>x-nested-repeat unconfigured2</h4>
   </template>
 
   <h4>inDocumentRepeater</h4>
-  <div id="inDocumentContainer">
+  <div id="inDocumentContainerOrig">
     <template id="inDocumentRepeater" is="dom-repeat" as="itema" index-as="indexa">
       <x-foo
              innera-prop="{{innera.prop}}"
@@ -62,6 +62,9 @@ <h4>inDocumentRepeater</h4>
     </template>
   </div>
 
+  <div id="inDocumentContainer">
+  </div>
+
   <script>
 
     /*
@@ -400,6 +403,111 @@ <h4>inDocumentRepeater</h4>
       test('basic rendering, downward item binding', function() {
         inDocumentRepeater.items = window.data;
         inDocumentRepeater.render();
+        var stamped = Polymer.dom(inDocumentContainerOrig).querySelectorAll('*:not(template)');
+        assert.equal(stamped.length, 3 + 3*3 + 3*3*3, 'total stamped count incorrect');
+        assert.equal(stamped[0].itemaProp, 'prop-1');
+        assert.equal(stamped[0].indexa, 0);
+        assert.equal(stamped[0].$.bar.itemaProp, 'prop-1');
+        assert.equal(stamped[1].itembProp, 'prop-1-1');
+        assert.equal(stamped[1].indexa, 0);
+        assert.equal(stamped[1].indexb, 0);
+        assert.equal(stamped[1].$.bar.itembProp, 'prop-1-1');
+        assert.equal(stamped[2].itemcProp, 'prop-1-1-1');
+        assert.equal(stamped[2].indexa, 0);
+        assert.equal(stamped[2].indexb, 0);
+        assert.equal(stamped[2].indexc, 0);
+        assert.equal(stamped[2].$.bar.itemcProp, 'prop-1-1-1');
+        assert.equal(stamped[3].itemcProp, 'prop-1-1-2');
+        assert.equal(stamped[3].indexa, 0);
+        assert.equal(stamped[3].indexb, 0);
+        assert.equal(stamped[3].indexc, 1);
+        assert.equal(stamped[3].$.bar.itemcProp, 'prop-1-1-2');
+        assert.equal(stamped[4].itemcProp, 'prop-1-1-3');
+        assert.equal(stamped[4].indexa, 0);
+        assert.equal(stamped[4].indexb, 0);
+        assert.equal(stamped[4].indexc, 2);
+        assert.equal(stamped[4].$.bar.itemcProp, 'prop-1-1-3');
+        assert.equal(stamped[13].itemaProp, 'prop-2');
+        assert.equal(stamped[13].indexa, 1);
+        assert.equal(stamped[13].$.bar.itemaProp, 'prop-2');
+        assert.equal(stamped[36].itemcProp, 'prop-3-3-1');
+        assert.equal(stamped[36].indexa, 2);
+        assert.equal(stamped[36].indexb, 2);
+        assert.equal(stamped[36].indexc, 0);
+        assert.equal(stamped[36].$.bar.itemcProp, 'prop-3-3-1');
+        assert.equal(stamped[37].itemcProp, 'prop-3-3-2');
+        assert.equal(stamped[37].indexa, 2);
+        assert.equal(stamped[37].indexb, 2);
+        assert.equal(stamped[37].indexc, 1);
+        assert.equal(stamped[37].$.bar.itemcProp, 'prop-3-3-2');
+        assert.equal(stamped[38].itemcProp, 'prop-3-3-3');
+        assert.equal(stamped[38].indexa, 2);
+        assert.equal(stamped[38].indexb, 2);
+        assert.equal(stamped[38].indexc, 2);
+        assert.equal(stamped[38].$.bar.itemcProp, 'prop-3-3-3');
+      });
+
+      test('move to different container', function() {
+        var repeater = inDocumentRepeater;
+        repeater.parentElement.removeChild(repeater);
+        // TODO(kschaaf): detached/attached not called if takeRecords isn't
+        // called between remove & insert on polyfill... See wcjs #311.
+        CustomElements.takeRecords();
+        CustomElements.takeRecords();
+        CustomElements.takeRecords();
+        inDocumentContainer.appendChild(repeater);
+        CustomElements.takeRecords();
+        CustomElements.takeRecords();
+        CustomElements.takeRecords();
+        var stamped = Polymer.dom(inDocumentContainer).querySelectorAll('*:not(template)');
+        assert.equal(stamped.length, 3 + 3*3 + 3*3*3, 'total stamped count incorrect');
+        assert.equal(stamped[0].itemaProp, 'prop-1');
+        assert.equal(stamped[0].indexa, 0);
+        assert.equal(stamped[0].$.bar.itemaProp, 'prop-1');
+        assert.equal(stamped[1].itembProp, 'prop-1-1');
+        assert.equal(stamped[1].indexa, 0);
+        assert.equal(stamped[1].indexb, 0);
+        assert.equal(stamped[1].$.bar.itembProp, 'prop-1-1');
+        assert.equal(stamped[2].itemcProp, 'prop-1-1-1');
+        assert.equal(stamped[2].indexa, 0);
+        assert.equal(stamped[2].indexb, 0);
+        assert.equal(stamped[2].indexc, 0);
+        assert.equal(stamped[2].$.bar.itemcProp, 'prop-1-1-1');
+        assert.equal(stamped[3].itemcProp, 'prop-1-1-2');
+        assert.equal(stamped[3].indexa, 0);
+        assert.equal(stamped[3].indexb, 0);
+        assert.equal(stamped[3].indexc, 1);
+        assert.equal(stamped[3].$.bar.itemcProp, 'prop-1-1-2');
+        assert.equal(stamped[4].itemcProp, 'prop-1-1-3');
+        assert.equal(stamped[4].indexa, 0);
+        assert.equal(stamped[4].indexb, 0);
+        assert.equal(stamped[4].indexc, 2);
+        assert.equal(stamped[4].$.bar.itemcProp, 'prop-1-1-3');
+        assert.equal(stamped[13].itemaProp, 'prop-2');
+        assert.equal(stamped[13].indexa, 1);
+        assert.equal(stamped[13].$.bar.itemaProp, 'prop-2');
+        assert.equal(stamped[36].itemcProp, 'prop-3-3-1');
+        assert.equal(stamped[36].indexa, 2);
+        assert.equal(stamped[36].indexb, 2);
+        assert.equal(stamped[36].indexc, 0);
+        assert.equal(stamped[36].$.bar.itemcProp, 'prop-3-3-1');
+        assert.equal(stamped[37].itemcProp, 'prop-3-3-2');
+        assert.equal(stamped[37].indexa, 2);
+        assert.equal(stamped[37].indexb, 2);
+        assert.equal(stamped[37].indexc, 1);
+        assert.equal(stamped[37].$.bar.itemcProp, 'prop-3-3-2');
+        assert.equal(stamped[38].itemcProp, 'prop-3-3-3');
+        assert.equal(stamped[38].indexa, 2);
+        assert.equal(stamped[38].indexb, 2);
+        assert.equal(stamped[38].indexc, 2);
+        assert.equal(stamped[38].$.bar.itemcProp, 'prop-3-3-3');
+      });
+
+      test('basic rendering, downward item binding', function() {
+        var r = inDocumentRepeater;
+        r.parentElement.removeChild(r);
+        inDocumentContainer.appendChild(r);
+
         var stamped = Polymer.dom(inDocumentContainer).querySelectorAll('*:not(template)');
         assert.equal(stamped.length, 3 + 3*3 + 3*3*3, 'total stamped count incorrect');
         assert.equal(stamped[0].itemaProp, 'prop-1');