Javascript 在另一个自定义标记内动态创建聚合元素

需要在另一个聚合元素的脚本中动态创建聚合元素办公室列表，如下所示：

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

聚合物({
是：“联系人标签”，
HandlerResponse:功能（请求）{
var response=request.detail.response；
this.officesRegions=response.officesRegions；
this.officecities=response.officecities；
var dynamicEl=document.createElement（“办公室列表”）；
dynamicEl.setAttribute（“regions”，this.officesRegions）；
dynamicEl.setAttribute（“cities”，此为.officesCities）；
document.body.appendChild（dynamicEl）；
}
});

然而，当它到达“document.createElement（“offices list”）；”时，这个新标记中的元素就开始呈现，并且它的on ready方法已经被调用，而我希望它们在设置属性之后发生。我怎么做

---

编辑：似乎问题的性质不同。我正在将对象设置为属性，而“Office list”标记无法识别它们，因此无法访问它或在其中循环。然后，我的问题将变为“如何绑定对象？”

您不应该使用

setAttribute

，而应该直接设置相应的属性

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

---

我认为正确的答案是——这取决于你想要实现什么

如果您希望强制数据绑定，也就是说，您希望在模板中动态添加类似的内容

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

最后，如果您的意图是在ajax请求完成后简单地显示

，那么我认为您可以通过声明的方式实现这一点

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

聚合物({
是：“联系人标签”，
特性：{
_区域：字符串，
_城市：字符串，
_DefectOfficeListWhenReady:{type:Boolean，value:false}
},
HandlerResponse:功能（请求）{
var response=request.detail.response；
此._regions=response.officesRegions；
这。_cities=response.officecities；
当nReady=true时，此项为；
}
});

无需动态元件。

您可以使用聚合物团队提供的

Polymer.dom(parent).appendChild(polymerChild)

---

您在

ready

回调中执行什么操作？如果要等待渲染，直到添加元素，然后使用

attached

callback即使我将所有内容都移动到ready-on-attached，我仍然存在立即渲染本地dom的问题。本地dom中的元素需要属性才能正确渲染，但由于属性是在createElement之后添加的，因此我无法控制它的渲染。正如我在问题中所说的，问题在于它不是等到它被实际附加，而是在createElement之后才被渲染，而不需要等待attributesGood catch“Polymer.dom（this.$.insertion_point）.appendChild（dynamicEl）；”我已经在代码中更正了，忘了在这里执行同样的操作。Umit的回复对我来说很有效，谢谢你的详细说明。嗯，如果是这样的话，那就意味着你没有在

元素中暴露

属性

对象中的任何属性，所以我不确定你为什么要专门为此创建一个新的web组件。。。但是我想任何可行的方法都可以。对于属性（非

HTMLElement

properties），您需要使用

setAttribute

。示例：

dynamicEl.setAttribute（'regions'，this.officesRegions）
Polymer.dom(parent).appendChild(polymerChild)