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テンプレート：あなたはready()にtrueにブールを設定する場合は、次のことを照会する前に、（Polymer.RenderStatus.afterNextRender()で）レンダリングに刻印されるボタンのを待つ必要があるだろうそのifプロパティが真実になったときにのみその内容をDOMにスタンプする。コンテンツがスタンプされると、ifプロパティが変更されたときにコンテンツが隠されて表示されます。 restampからtrueに設定すると、コンテンツが新たに破棄されて作成されます。

したがっては、readyライフサイクルコールバックで完了していないweatherResponseを取得する前に見つかりません。

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

それが刻印されている要素は、比較的ヘビー級と条件としているとき、条件付きテンプレートが最初の作成コストを節約するためにのみ有用であり、非表示と表示の要素をではなく、それらを破壊し、再作成するために非常に速く、一般的であるので、与えられた用途ではまれに（あるいは決して）真実ではないかもしれない。そうしないと、条件付きテンプレートを自由に使用すると、実際にはランタイム・パフォーマンスのオーバーヘッドが大幅に増加する可能性があります。

ので、おそらくhidden$="[[!weatherResponse]]"属性を持つ要素（例えばdiv）にあなたのdom-ifテンプレートを変更すると、あなたのケースでは、より適切であろう。 readyが呼び出されると、これにはpaper-icon-buttonが打たれます。

Answer 2

Automated Node Finding状態のためのポリマードキュメント：

注：（dom-repeatとdom-ifテンプレートにおけるものを含む）データバインディングを使用して動的に作成ノードはthis.$ハッシュに追加されません。ハッシュには、静的に作成されたローカルDOMノード（要素の最も外側のテンプレートに定義されたノード）のみが含まれます。

したがって、this.$['location-button']ではなく、this.$$('#location-button')のボタンをクエリする必要があります。

#location-buttonを照会すると、ブールweatherResponseがfalseと仮定しています。この場合、ボタンはDOMに存在しません。

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

codepen