Skip to content

Commit

Permalink
Re-insert rows when re-attaching. Fixes #1498.
Browse files Browse the repository at this point in the history
  • Loading branch information
@kevinpschaaf
kevinpschaaf committed May 27, 2015
1 parent 5250037 commit da2c5f7
Showing 1 changed file with 9 additions and 1 deletion.
10 changes: 9 additions & 1 deletion src/lib/template/dom-repeat.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down

1 comment on commit da2c5f7

@usermax83
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In my use case the fix doesn't work - the re-inserted nodes don't show up.
If i omit the Polymer.dom(...) calls in the "attached" callback, the insertion is performed and the nodes show up, but local styling disappears.

Here is a stripped down demo:

< script src="polymer1.0/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
< link rel="import" href="polymer1.0/bower_components/polymer/polymer.html">
< link rel="import" href="polymer1.0/bower_components/paper-material/paper-material.html">

<dom-module id="outer-element">
    <template>
        <paper-material elevation="1">
            <template is="dom-repeat" items="{{items}}">
                <inner-element name="{{item.name}}"></inner-element>
            </template>
        </paper-material>
    </template>
</dom-module>
<script>
    Polymer({
        is: 'outer-element',
        properties: {
            items: {
                type: Array,
                value: function () {
                    return [{ name: 'foo' }, { name: 'bar' }];
                }
            }
        }
    });
</script>

<dom-module is="inner-element">
    <template>
        <p>{{name}}</p>
    </template>
</dom-module>
<script>
    Polymer({
        is: 'inner-element',
        properties: { name: String }
    });
</script>

< style>
    div {
        border: 1px solid #000;
        min-width: 200px;
        min-height: 200px;
        float: left;
    }
< /style>

< /head>
< body>
< div id="first">< outer-element id="my-list">< /outer-element>< /div>
< div id="second">< /div>
< button onclick="changeParent()">move my-list to second div< /button>
< script>
function changeParent() {
Polymer.dom(document.querySelector("#second")).appendChild(document.querySelector("#my-list"))
}
< /script>
< /body>
< /html>

Please sign in to comment.