聚合物 - document.queryselector始终返回空/未定义

Question

这是我的代码：

<dom-module id="my-view1">
  <template id="methodScope">
    <paper-dialog id="modal1">
      <paper-swatch-picker></paper-swatch-picker>
      <paper-button dialog-confirm autofocus>Fertig</paper-button>
    </paper-dialog>
    <paper-toast id="copiedColor" text="Farbe in die Zwischenablage kopiert!"></paper-toast>
  </template>

  <script>
    Polymer({
      is: 'my-view1',
      },
      _alertColor: function(event) {
        this.selectedColor = "works";
        this.$.copiedColor.open();
      }
    });
  </script>
  <script>
      HTMLImports.whenReady(function() {
        var t = document.querySelector('#methodScope');
        document.addEventListener('color-picker-selected', function(e) {
          t._alertColor();
        });
      });
    </script>
</dom-module>

无论我尝试什么，使用此努力的所有努力。$或document。

我将如何在聚合物脚本外的JavaScript中正确执行_alertColor函数？

还使用document.queryselector（'＃my-view1'）;

Answer 1

首先，我认为您的代码中有一个错字：

Polymer({
  is: 'my-view1',
  },
  _alertColor: function(event) {
    this.selectedColor = "works";
    this.$.copiedColor.open();
  }
});

应该是：

Polymer({
  is: 'my-view1',
  _alertColor: function(event) {
    this.selectedColor = "works";
    this.$.copiedColor.open();
  }
});

另外：您正在定义元素，但是您在代码中的任何地方都没有使用它。您需要创建该元素的实例才能使用其方法：

<!-- define the element -->
<dom-module id="my-view1">
  <template id="methodScope">
    <paper-dialog id="modal1">
      <paper-swatch-picker></paper-swatch-picker>
      <paper-button dialog-confirm autofocus>Fertig</paper-button>
    </paper-dialog>
    <paper-toast id="copiedColor" text="Farbe in die Zwischenablage kopiert!"></paper-toast>
  </template>
  <script>
    Polymer({
      is: 'my-view1',
      _alertColor: function(event) {
        this.selectedColor = "works";
        this.$.copiedColor.open();
      }
    });
  </script>
</dom-module>
<!-- use the element -->
<my-view1></my-view1>
  <script>
  HTMLImports.whenReady(function() {
    var t = document.querySelector('my-view1');
    document.addEventListener('color-picker-selected', function(e) {
      t._alertColor();
    });
  });
</script>

在更复杂的现实世界应用中，您想确保已将元素插入文档中。

例如，在您的网站上，仅当您到达第二步时，该元素才插入文档，然后单击" hex中的Farbe"。

这是生命周期回调的目的，在您的情况下很可能是"附加"回调：

<dom-module id="my-view1">
  <template id="methodScope">
    <paper-dialog id="modal1">
      <paper-swatch-picker id="colorpicker"></paper-swatch-picker>
      <paper-button dialog-confirm autofocus>Fertig</paper-button>
    </paper-dialog>
    <paper-toast id="copiedColor" text="Farbe in die Zwischenablage kopiert!"></paper-toast>
  </template>
  <script>
    Polymer({
      is: 'my-view1',
      _alertColor: function(event) {
        this.selectedColor = "works";
        this.$.copiedColor.open();
      },
      attached: function() {
        //this code is running when the element is put into the DOM
        var self = this
        this.$.colorpicker.addEventListener('color-picker-selected', function() {
          self._alertColor()
        })
      }
    });
  </script>
</dom-module>