Skip to content

Commit

Permalink
Fixes #4447 by introducing a new insertBefore api on Templatize’d i…
Browse files Browse the repository at this point in the history
…nstances. This api should be used to insert instances into the dom.
  • Loading branch information
Steven Orvell committed Apr 4, 2017
1 parent 6ca0927 commit 9860cff
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 8 deletions.
2 changes: 1 addition & 1 deletion lib/elements/dom-if.html
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@
}
if (!this.__instance) {
this.__instance = new this.__ctor();
parentNode.insertBefore(this.__instance.root, this);
this.__instance.insertBefore(parentNode, this);
} else {
this.__syncHostProperties();
let c$ = this.__instance.children;
Expand Down
2 changes: 1 addition & 1 deletion lib/elements/dom-repeat.html
Original file line number Diff line number Diff line change
Expand Up @@ -580,7 +580,7 @@
}
let beforeRow = this.__instances[instIdx + 1];
let beforeNode = beforeRow ? beforeRow.children[0] : this;
this.parentNode.insertBefore(inst.root, beforeNode);
inst.insertBefore(this.parentNode, this);
this.__instances[instIdx] = inst;
return inst;
}
Expand Down
16 changes: 10 additions & 6 deletions lib/utils/templatize.html
Original file line number Diff line number Diff line change
Expand Up @@ -54,12 +54,6 @@
if (this.__templatizeOwner.__hideTemplateChildren__) {
this._showHideChildren(true);
}
// Flush props only when props are passed if instance props exist
// or when there isn't instance props.
let options = this.__templatizeOptions;
if ((props && options.instanceProps) || !options.instanceProps) {
this._flushProperties();
}
}
/**
* @private
Expand All @@ -77,6 +71,16 @@
this._setPendingProperty(hprop, this.__dataHost['_host_' + hprop]);
}
}
/**
Inserts the templatized dom into the given `parentNode` before
`refNode`.
@param {Node} parentNode node into which to insert dom
@param {Node} refNode node before which to insert dom
*/
insertBefore(parentNode, refNode) {
parentNode.insertBefore(this.root, refNode);
this._flushProperties();
}
/**
* Forwards a host property to this instance. This method should be
* called on instances from the `options.forwardHostProp` callback
Expand Down
72 changes: 72 additions & 0 deletions test/smoke/ready-order.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<!--
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!DOCTYPE html>
<html>
<head>
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../polymer.html">
</head>
<body>
<dom-module id="grandchild-element">
<script>
Polymer({
is: 'grandchild-element',
ready: function(){
console.log('grandchild-element ready');
}
});
</script>
</dom-module>
<dom-module id="child-element">
<template>
<grandchild-element></grandchild-element>
<h2>{{person}}</h2>
</template>
<script>
Polymer({
is: 'child-element',
properties: {
person: {
type: Object
}
},
ready: function(){
console.log('child-element ready');
}
});
</script>
</dom-module>
<dom-module id="parent-element">
<template>
<template is="dom-repeat" items="[[childrenData]]">
<child-element person="[[item]]"></child-element>
</template>
</template>
<script>
Polymer({
is: 'parent-element',
properties: {
childrenData: {
type: Array,
value: function() { return ["Child name"]}
}
},
ready: function(){
console.log('parent-element ready');
}
});
</script>
</dom-module>


<parent-element></parent-element>

</body>
</html>

0 comments on commit 9860cff

Please sign in to comment.