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