在另一个自定义标记

时间:2015-06-29 11:43:42

标签: javascript polymer

聚合物元素offices-list需要在另一个聚合物元素的脚本中动态创建,如下所示:

<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“);”这个新标签内的元素开始渲染,并且已经调用了ready方法,而我在设置属性后期望它们发生。我该怎么办?

编辑:似乎问题属性不同。我将对象设置为属性,“offices-list”标签无法识别它们,因此无法访问它或循环访问它。然后,我的问题将改为“如何绑定对象?”

3 个答案:

答案 0 :(得分:11)

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

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

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

不需要动态元素。

答案 1 :(得分:6)

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

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

答案 2 :(得分:1)

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

Polymer.dom(parent).appendChild(polymerChild)