Как выбрать элемент внутри dom-модуля в полимере 1.0?

Question

У меня есть следующий модуль dom-module, для которого я пытаюсь создать взаимодействия.

<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> 

Я хочу, чтобы выбрать элемент Vaadin-загрузку по его ID, но он возвращает пустой и я смущен о том, почему она возвращается нуль.

Как выбрать такой элемент в Polymer?

Answer 1

Если элемент имеет идентификатор и статически добавляется в шаблон, вы можете использовать

var uploader = this.$.uploader; 

, чтобы получить ссылку на элемент с идентификатором uploader.

Если элемент находится внутри <template is="dom-if">, <template is="dom-repeate"> или иначе динамически создан, это не поддерживается.

В таких случаях можно использовать

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

this.$$(...) обеспечивает полную поддержку CSS селектор и возвращает первый элемент согласования, в то время как this.$... поддерживает только идентификаторы.