dinamicamente creando elemento polimero all'interno di un altro tag personalizzato

Question

un elemento polimero uffici-list deve essere creato in modo dinamico all'interno di script di un altro elemento di polimero così:

<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> 

Tuttavia, non appena raggiunge "document.createElement (" uffici -elenco");" l'elemento all'interno di questo nuovo tag inizia il rendering, e il metodo è già pronto è già stato chiamato, mentre mi aspettavo che succedessero dopo aver impostato gli attributi. Come posso farlo?

Modifica: Sembra che il problema sia di natura diversa. Sto impostando gli oggetti sugli attributi e il tag "uffici-list" non li riconosce, quindi non è in grado di accedervi o di passarci sopra. Quindi, la mia domanda cambierà in "Come legare gli oggetti?"

Answer 1

Non si deve utilizzare setAttribute ma è necessario impostare direttamente la proprietà corrispondente.

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

Answer 2

Penso che la risposta giusta è - dipende da ciò che si sta cercando di ottenere.

Se stai cercando di imperativamente dati-bind cioè che si desidera aggiungere dinamicamente qualcosa di simile nel modello,

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

sei out of luck perché imperativo di associazione dati non è supportato in Polymer 1.0 .

Se si vuole semplicemente passare parametri (NON data-bind) in un elemento dinamico-creato, sia el.setAttribute() e el.myAttribute = this.myAttribute dovrebbe funzionare.

Dal momento che si utilizza Polimero, penso che si dovrebbe cercare di contenere le manipolazioni DOM all'interno del framework (all'interno di un'istanza di modello Polymer) invece di aggiungere direttamente a document.body, qualcosa di simile.

<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> 

Infine, se la vostra intenzione è quella di visualizzare semplicemente un <contacts-tag> dopo che la richiesta Ajax è stata completata, penso che si può raggiungere questo obiettivo in modo dichiarativo.

<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> 

Nessun elemento dinamico necessario.