如何获取dom-if或dom-repeat中的元素？

Question

<dom-module id="weather-data">
<template>
  <style is="custom-style" include="iron-flex iron-flex-alignment">


 :host {
      display: block;
      font-family: Roboto;
    }

    paper-progress {
      top: 0;
      left: 0;
      position: fixed;
      width: 100%;
      --paper-progress-active-color: var(--paper-light-blue-500);
      --paper-progress-secondary-color: var(--paper-light-blue-100);
    }

    paper-icon-button {
      margin: 0 auto;
      margin-top: 20px;
      display: block;
    }

    #weatherIcon {
      width: 200px;
      height: 200px;
    }

    table {
      border-collapse: collapse;
    }

    table td {
      text-align: center;
      border: 1px solid #006064;
      padding: 5px;
    }

  </style>

  <paper-progress
    id="request-progress"
    indeterminate
    hidden$="[[!activeRequest]]">
  </paper-progress>

  <iron-ajax
    id="getData"
    auto
    url="[[weatherApiUrl]]"
    handle-as="json"
    last-response="{{weatherResponse}}"
    last-error="{{error}}"
    params="[[_getGegevensVanLocatie(coordinaten.latitude,        coordinaten.longitude)]]"
    loading="{{activeRequest}}">
  </iron-ajax>

  <template is="dom-if" id="tmp" if="[[weatherResponse]]">
    <paper-icon-button
    id="location-button"
    disabled$="{{disableLocationButton}}"
    on-tap="_getLocation"
    icon="maps:my-location"
    alt="Zoek mijn huidige locatie">
    </paper-icon-button>

    <div>
      <div class="horizontal center-justified layout">
        <h2>Weer voor locatie: <span>[[_maakLocationString(weatherResponse.query.results.channel.location)]]</span></h2>
      </div>
      <div class="horizontal center-justified layout">

        <iron-icon
          id="weatherIcon"
          icon="[[_getIcon(weatherResponse.query.results.channel.item.condition.code)]]">
        </iron-icon>

      </div>
      <div class="horizontal center-justified layout">
        <h2>
          <span>
            [[weatherResponse.query.results.channel.item.condition.text]],
            [[weatherResponse.query.results.channel.item.condition.temp]]° [[weatherResponse.query.results.channel.units.temperature]]
          </span>
        </h2>
      </div>
      <div class="horizontal center-justified layout">
        <table>
          <tr>
            <td>
              <iron-icon icon="icons:arrow-upward"></iron-icon>
            </td>
            <td>
              <iron-icon icon="icons:arrow-downward"></iron-icon>
            </td>
          </tr>
          <tr>
            <td>[[weatherResponse.query.results.channel.astronomy.sunrise]]</td>
            <td>[[weatherResponse.query.results.channel.astronomy.sunset]]</td>
          </tr>
        </table>
      </div>
      <div class="horizontal center-justified layout">
        <h5 id="update-time">
          Gegevens geraadpleegd om: [[weatherResponse.query.results.channel.item.condition.date]]<span></span>
        </h5>
      </div>
    </div>
  </template>
</template>

<script>


    Polymer({
        is: 'weather-data',
        properties: {
            weatherApiUrl: {
                type: String,
                value: "https://query.yahooapis.com/v1/public/yql"
            },
            coordinaten: {
                type: Array,
                value: {
                    longitude: 22,
                    latitude: 22
                }
            }
        },
        ready: function() {
            if (navigator.permissions && navigator.permissions.query) {
                navigator.permissions.query({
                    name: 'geolocation'
                }).then(function(status) {
                    if (status.state === 'granted') {
                        console.log("Permisson already granted");
                        _getLocation();
                    } else {
                        console.log("Location not YET granted, using default coordinates");
                        if (status.state === "denied") {
                            console.log("Denied");
                        }
                    }
                });
            } else {
                console.log("Permission not available");
                console.log("Using standard coordinates");
            }
        },
        _getLocation: function() {
            console.log("Getting location");
        },
        _getGegevensVanLocatie: function(latitude, longitude) {
            var latLong = '(' + 51.0339 + ',' + 3.7094 + ')';
            return {
                format: 'json',
                q: 'select * from weather.forecast where woeid in ' +
                    '(select woeid from geo.places(1) where text="' + latLong + '") and u="c"'
            };
        },
        _maakLocationString: function(location) {
            if (location.city && location.region) {
                return location.city + ', ' + location.region;
            } else {
                return location.city || 'Onbekend';
            }
        },
        _getIcon: function(code) {
            if (code >= 37 || code <= 12) {
                return "image:flash-on";
            }

            if (code <= 18) {
                return "image:flare";
            }

            if (code <= 30) {
                return "image:wb-cloudy";
            }

            return "image:wb-sunny";
        }
    })
</script>

这就是我的代码。 我想做的是，当状态更改为“已授予”时，在导航器上授予了权限时，获取了<paper-icon-button>元素。 但是，这不适用于this.$.location-button或this.$$('#location-button) 。

这是因为我在ready()函数中使用了它吗？

Answer 1

用于自动节点查找的Polymer文档状态：

注意：使用数据绑定动态创建的节点（包括dom-repeat和dom-if模板中的节点）不会添加到this.$哈希中。 哈希仅包含静态创建的本地DOM节点（即，元素最外层模板中定义的节点）。

因此，在您的情况下，您必须使用this.$$('#location-button')来查询按钮，而不是使用this.$['location-button'] 。

我假设在查询#location-button ，布尔型weatherResponse为false ，在这种情况下，该按钮在DOM中将不存在。 如果在ready()中将Boolean设置为true ，则在查询按钮之前，必须等待按钮在下一个渲染（使用Polymer.RenderStatus.afterNextRender() ）中被标记：

ready: function() {
  this.weatherResponse = true;
  Polymer.RenderStatus.afterNextRender(this, () => {
    console.log(this.$$('#location-button'));
  });
}

codepen

Answer 2

dom-if模板仅在其if属性变为true时才将其内容标记到DOM中。 标记内容后， if属性更改，它只会隐藏并显示内容。 尽管将restamp设置为true会破坏并重新创建内容。

因此，在获取weatherResponse在元素ready生命周期回调中尚未完成）之前，您无法找到paper-icon-button 。

请注意，在有关聚合物条件模板用法的文档中，它说：

由于通常隐藏和显示元素比破坏并重新创建它们要快得多，因此条件模板仅在被压印的元素相对较重且在给定用法中很少（或永远不会）满足条件时才可节省初始创建成本。 。 否则，自由使用条件模板实际上会增加大量的运行时性能开销。

因此，在您的情况下，也许将dom-if模板更改为具有hidden$="[[!weatherResponse]]"属性的元素（例如div ）。 当调用ready时，也将在paper-icon-button上盖章。