Polymer：访问聚合物元素对象答案

【问题标题】：Polymer: access polymer element objectsPolymer：访问聚合物元素对象
【发布时间】：2015-08-12 15:16:42
【问题描述】：

我有一个叫做 his-service 的聚合物元素：

 <polymer-element name="gis-service" attributes="response url">
  <template>
    <style>
    </style>
    <core-ajax id="ajax"
      auto
      url="{{url}}"
      method="get"
      contentType = 'application/json'
      on-core-response="{{postsLoaded}}"
      body="{{body}}"
      handleAs="xml">
    </core-ajax>
  </template>
  <script>
  Polymer('gis-service', {
    created: function() {
      this.response = [];
    },
    postsLoaded: function() {
        this.response = [];
        this.labels = [];
        this.coordinates = [];
        x = this.$.ajax.response.getElementsByTagName("CustomerServiceCenterData");
        for (i=0;i<x.length;i++) {
            if (x[i].getElementsByTagName("language")[0].innerHTML == "EN")
            {
                this.labels[i] = x[i].getElementsByTagName("label")[0].innerHTML;
                this.coordinates.push({
                    lat:x[i].getElementsByTagName("lat")[0].innerHTML,
                    lng:x[i].getElementsByTagName("lng")[0].innerHTML
                })
            }
        }
        console.log(this.coordinates);
    }
  });
  </script>
</polymer-element>

在索引文件中，我尝试访问对象标签和坐标。以下为部分索引：

<gis-service id="gservice" response="{{labels}}" url="someUrl">
</gis-service>
<script>
    var gis_service = document.querySelector('gis-service');
    console.log(gis_service);
</script>

如您所见，我正在尝试通过 querySelector 访问标签和坐标。但是，当我尝试通过以下方式获取标签时：

gis_service.labels

它给了我不确定性。与变量坐标相同。我可以看到这两个变量：console.log(gis_service)，但无法访问它们。任何帮助表示赞赏。

【问题讨论】：

在查询您的自定义元素之前先尝试监听 polymer-ready 事件。
this.labels = [];在函数内部定义。

标签： javascript html data-binding polymer web-component

【解决方案1】：

在函数之外定义它，然后你应该能够在外部使用它。此格式适用于 .8 版本。 1.0版本需要使用新格式。

created: function() {
      this.response = [];
    },
	labels: undefined,
    postsLoaded: function() {

【讨论】：

【解决方案2】：

您应该阅读有关数据绑定here

不要这样做：

 <core-ajax id="ajax"
      auto
      url="{{url}}"
      method="get"
      contentType = 'application/json'
      on-core-response="{{postsLoaded}}"
      body="{{body}}"
      handleAs="xml">
    </core-ajax>

改为这样做：

 <core-ajax id="ajax" auto url="{{url}}" method="get" contentType ='application/json' on-core-response="{{postsLoaded}}" body="{{body}}" handleAs="xml"></core-ajax>

尚不支持将绑定放在不同的行上

【讨论】：

【解决方案3】：

还有其他方法可以尝试访问这些值，试试 var yourElement = document.getElementById('gservice'); 如果这不起作用，请尝试使用 'querySelector'，如下所示：

<gis-service id="gservice" class="gservice" response="{{labels}}" url="someUrl"> </gis-service> <script> var gis_service = document.querySelector('gservice'); console.log(gis_service); </script>

查看附加的类属性。

另外我建议你升级到 Polymer 1.0，因为它允许更强大的方式来做事......

【讨论】：