如何 select 聚合物 1.0 中 dom 模块内的元素？

Question

我有以下 dom-模块，我正在尝试为其创建交互。

<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 select vaadin-upload 元素，但它 returns 为 null，我对它返回 null 的原因感到困惑。

如何在 Polymer 中 select 这样的元素？

Answer 1

如果元素有id并且静态添加到模板中，可以使用

var uploader = this.$.uploader;

获取对 ID 为 uploader 的元素的引用。

如果元素在 <template is="dom-if">、<template is="dom-repeate"> 内或以其他方式动态创建，则不支持。

在这种情况下，您可以使用

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

this.$$(...) 提供完整的 CSS 选择器支持和 returns 第一个匹配元素，而 this.$... 仅支持 ID。

如何 select 聚合物 1.0 中 dom 模块内的元素？

How to select an element inside a dom-module in polymer 1.0?

dom

polymer-1.0