如何在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

的dom-if模板只有当其if属性变得真实时，才将其内容标记到DOM中。一旦内容被加盖，它只会在if属性更改时隐藏和显示内容。虽然将restamp设置为true会破坏并重新创建内容。

因此，在取回weatherResponse之前，您不能在您的元素ready生命周期回调中找到您的paper-icon-button。

Note that in the docs for polymers conditional templates usage it says:

因为通常快得多隐藏和显示元素，而不是破坏并重新创建它们，有条件的模板仅用来保存时被冲压的元素是相对重量级的和有条件的初始创建成本在给定的用法中可能很少（或从不）真实。否则，自由使用条件模板实际上会增加显着的运行时性能开销。

因此，也许改变你dom-if模板到一个元素（例如div）与hidden$="[[!weatherResponse]]"属性是你的情况更合适。当调用ready时，这也会使paper-icon-button被加盖。

Answer 2

聚合物文档为Automated Node Finding状态：

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

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

我假设布尔weatherResponse是false当您查询#location-button，在这种情况下，该按钮将不存在于DOM中。如果您在ready()设置布尔到true，你必须等待按钮，在接下来的查询之前渲染（与Polymer.RenderStatus.afterNextRender()）盖章：

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

codepen