Dynamically create a polymer element inside another custom tag

Question

The list of polymer element offices should be dynamically created inside another polymer element script as follows:

<dom-module id="contacts-tag"> <template> <iron-ajax ... on-response = "handleResponse"></iron-ajax> </template> <script> Polymer({ is: "contacts-tag", handleResponse: function(request){ var response = request.detail.response; this.officesRegions = response.officesRegions; this.officesCities = response.officesCities; var dynamicEl = document.createElement("offices-list"); dynamicEl.setAttribute("regions", this.officesRegions); dynamicEl.setAttribute("cities", this.officesCities); document.body.appendChild(dynamicEl); } }); </script></dom-module> 

However, as soon as it reaches document.createElement ("office-list"); the element inside this new tag starts rendering, and it is ready for the finished method, while I expected them to happen after I set the attributes. How can i do this?

Edit: It seems that the problem is of a different nature. I set objects in attributes, and the "office-list" tag does not recognize them, therefore, cannot access it or skip it. Then my question will change to: "How to link objects?"

Answer 1

You should not use setAttribute , but you must set the corresponding property directly.

 var dynamicEl = document.createElement("offices-list"); dynamicEl.regions = this.officesRegions; dynamicEl.cities = this.officesCities; document.body.appendChild(dynamicEl); 

Answer 2

I think the correct answer depends on what you are trying to achieve.

If you are looking for strongly binding data , that is, you want to dynamically add something like this to the template,

 <offices-list offices-regions="{{regions}}" offices-cities="{{cities}}"> </offices-list> 

you're out of luck because mandatory data binding is not supported in Polymer 1.0.

If you just want to pass parameters ( NOT data binding) to a dynamically created element, then both el.setAttribute() and el.myAttribute = this.myAttribute should work.

Since you are using Polymer, I think you should try to contain DOM manipulations inside the frame (inside the Polymer template instance) instead of directly adding to document.body , something like this.

 <dom-module id="contacts-tag"> <template> <iron-ajax ... on-response="handleResponse"></iron-ajax> <div id="insertion_point"></div> </template> <script> Polymer({ is: "contacts-tag", handleResponse: function(request) { ... Polymer.dom(this.$.insertion_point).appendChild(dynamicEl); } }); </script> </dom-module> 

Finally, if you intend to simply display the <contacts-tag> after completing the ajax request, I think you can achieve this declaratively.

 <dom-module id="contacts-tag"> <template> <iron-ajax ... on-response="handleResponse"></iron-ajax> <template is="dom-if" if="{{_unveilOfficesListWhenReady}}"> <offices-list offices-regions="{{_regions}}" offices-cities="{{_cities}}"> </offices-list> </template> </template> <script> Polymer({ is: "contacts-tag", properties: { _regions: String, _cities: String, _unveilOfficesListWhenReady: { type: Boolean, value: false } }, handleResponse: function(request) { var response = request.detail.response; this._regions = response.officesRegions; this._cities = response.officesCities; this._unveilOfficesListWhenReady = true; } }); </script> </dom-module> 

No dynamic element required.