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.querySelector最终返回undefined或null，无论是元素还是函数。

如何在Polymer脚本之外的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>

在更复杂的实际应用程序中，您需要确保该元素已插入到文档中。

例如，在您的网站上，当您到达第二步并单击＆＃34; Farbe in Hex＆＃34;时，该元素仅插入到文档中。

这是lifecycle callbacks的用途，在您的情况下很可能是＆＃34;附加＆＃34;回调：

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

Polymer - document.querySelector始终返回null / undefined

1 个答案: