ポリマー1.0のdomモジュール内の要素を選択する方法は？

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> 

私はそれのIDでvaadinアップロード要素を選択したいが、それはヌルを返し、私はそれがnullを返している原因で混乱しています。

このような要素をPolymerで選択するにはどうすればよいですか？

Answer 1

要素にidを持っており、静的テンプレートに追加されている場合は、ID uploaderを持つ要素への参照を取得するために

var uploader = this.$.uploader; 

を使用することができます。

要素が<template is="dom-if">の中にある場合は、<template is="dom-repeate">またはそれ以外は動的に作成されます。これはサポートされていません。あなたは

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

this.$$(...)を使用することができ、このようなケースでは

は、フルCSSセレクタのサポートを提供してthis.$...はIDのみをサポートしながら、最初に一致した要素を返します。