Wie wähle ich ein Element in einem dom-Modul in Polymer 1.0?

Question

Ich habe das folgende dom-Modul, für das ich versuche, Interaktionen zu erstellen.

<dom-module is="bw-image-upload"> 
<template> 
    <vaadin-upload id="uploader" 
        target="{{ API_URL}}/images/upload" 
        method="POST" 
        max-files="1" 
        max-file-size="200000" 
        accept="image/*" 
        upload-success="uploadResponseHandler" 
        file-reject="errorHandler" 
    > 
    </vaadin-upload> 
</template> 
    <script> 
     Polymer({ 
       is: 'bw-image-upload', 
       properties: { 
         image: String, 
         notify: true 
       } 
       }); 

     var uploader = document.querySelector('#uploader'); 

     uploader.addEventListener('upload-before', function(event) { 
      console.log(event); 
     }); 

    </script> 
</dom-module> 

Ich möchte das Vaadin-Upload Element auszuwählen, indem es ID ist, aber es gibt eine Null, und ich bin verwirrt, warum es null zurückkehrt.

Wie wähle ich ein Element wie dieses in Polymer?

Answer 1

Wenn das Element eine ID hat und an der Vorlage statisch hinzugefügt wird, können Sie

var uploader = this.$.uploader; 

verwenden, um einen Verweis auf ein Element mit der ID uploader zu bekommen.

Wenn das Element innerhalb <template is="dom-if">, <template is="dom-repeate"> oder anderweitig dynamisch erstellt wird, wird dies nicht unterstützt.

In solchen Fällen können Sie

var uploader = this.$$('#uploader'); 

this.$$(...) bietet volle CSS-Selektor Unterstützung und gibt das erste passende Element verwenden, während this.$... nur IDs unterstützt.