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

Dynamically creating polymer element inside another custom tag

提问by Nazerke

A polymer element offices-list needs to be created dynamically inside another polymer element's script as so:

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

<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("offices-list");" the element inside this new tag starts rendering, and it's on ready method is already called, while I was expecting them to happen after I set attributes. How can I do it?

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

Edit:Seems that problem is of different nature. I'm setting objects to attributes and "offices-list" tag is not recognizing them, hence isn't able to access it or loop through it. Then, my question will change to, "How to bind objects?"

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

采纳答案by ümit

You should not use setAttributebut you should set the corresponding property directly.

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

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

回答by zerodevx

I think the right answer is - it depends on what you are trying to achieve.

我认为正确的答案是 -这取决于您要实现的目标。

If you are looking to imperatively data-bindi.e. you want to dynamically add something like this into the template,

如果您正在寻找命令式数据绑定，即您想动态地将这样的内容添加到模板中，

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

you are out of luckbecause imperative data-binding is not supported in Polymer 1.0.

你运气不好，因为 Polymer 1.0 不支持命令式数据绑定。

If you simply want to pass in parameters (NOTdata-bind) into a dynamically-created element, both el.setAttribute()and el.myAttribute = this.myAttributeshould work.

如果你只是想在参数（传递NOT数据绑定）到一个动态创建的元素，无论是el.setAttribute()和el.myAttribute = this.myAttribute应该工作。

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

由于您使用的是 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>

Lastly, if your intention is to simply display a <contacts-tag>after the ajax request is completed, I think you can achieve this declaratively.

最后，如果您的意图是<contacts-tag>在 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>

No dynamic element needed.

不需要动态元素。

回答by Ismayil Niftaliyev

You can use dom apiprovided by polymer team.

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

Polymer.dom(parent).appendChild(polymerChild)