在另一个自定义标签内动态创建聚合物元素答案

【问题标题】：Dynamically creating polymer element inside another custom tag在另一个自定义标签内动态创建聚合物元素
【发布时间】：2015-06-29 11:43:42
【问题描述】：

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

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

但是，一旦它到达“document.createElement("offices-list");”这个新标签中的元素开始渲染，并且它的就绪方法已经被调用，而我期待它们在我设置属性后发生。我该怎么做？

编辑：似乎问题的性质不同。我正在将对象设置为属性，并且“offices-list”标签无法识别它们，因此无法访问它或遍历它。然后，我的问题将变为“如何绑定对象？”

【问题讨论】：

你在ready回调中做了什么？如果你想等待渲染直到元素被添加然后使用attached回调
即使我把所有东西都准备好连接上，我仍然有本地 dom 立即渲染的问题。本地 dom 中的元素需要属性才能正确渲染，但是因为属性是在 createElement 之后添加的，所以我无法控制它被渲染。正如我在问题中所说，问题在于它不是等到它实际附加，而是在 createElement 之后渲染而不等待属性

标签： javascript polymer

【解决方案1】：

我认为正确的答案是 - 这取决于你想要达到的目标。

如果您希望强制数据绑定，即您想动态地将类似的内容添加到模板中，

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

你是 out of luck，因为 Polymer 1.0 不支持命令式数据绑定。

如果您只是想将参数（NOT 数据绑定）传递到动态创建的元素中，el.setAttribute() 和 el.myAttribute = this.myAttribute 都应该可以工作。

由于您使用的是 Polymer，我认为您应该尝试在框架内（在 Polymer 模板实例内）包含 DOM 操作，而不是直接添加到 document.body，像这样。

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

最后，如果您的意图是在 ajax 请求完成后简单地显示 <contacts-tag>，我认为您可以通过声明方式实现。

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

不需要动态元素。

【讨论】：

好捕捉“Polymer.dom(this.$.insertion_point).appendChild(dynamicEl);”我已经在我的代码中更正了，忘了在这里做同样的事情。 Umit的回复对我有用，感谢您的详细说明
嗯，如果是这样，这意味着您没有在 properties 对象中公开任何属性在您的 <offices-list> 元素中，所以我不确定您为什么要专门创建一个新的网络组件......但我猜不管用什么。

【解决方案2】：

你不应该使用setAttribute，但你应该直接设置相应的属性。

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

【讨论】：

对于属性（非HTMLElement属性），您需要使用setAttribute。示例：dynamicEl.setAttribute('regions', this.officesRegions);

【解决方案3】：

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

Polymer.dom(parent).appendChild(polymerChild)

【讨论】：