如何设置“点击”行为 </paper-button> 在Polymer中使用Javascript

Question

我正在尝试使用Poylmer 2.x中的功能将paper-button即时添加到tho DOM。

我希望这个新按钮可以在点击时调用另一个函数。

appendNodeToDom() {
  let prop = this.result[i]['someProperty'];
  let node = document.createElement("paper-button");
  let button = document.createTextNode(prop);

  button.ontap = this.go(); // what is the proper syntax for this?

  node.appendChild(button);
  this.shadowRoot.getElementById('buttons').appendChild(node);
}

go() {
  console.log('go');
}

还尝试了：

button.addEventListener("click", this.go());
button.addEventListener("tap", this.go());

如何在Polymer 2.x中使用Javascript设置“轻按”行为？

Answer 1

问题是您将button称为paper-button 内的文本节点，并在该节点上设置事件侦听器，该事件侦听器（作为Text节点）不会触发事件（除了一些例外 ）。

另外，您将this.go()作为回调传递给addEventListener 。 这意味着将执行 this.go() ，然后将返回值作为回调传递（在这种情况下为undefined因为在console.log之后您将不返回任何内容）。 相反，您应该传递函数的标识符而不调用它：

addEventListener('tap', this.go);

全部一起：

appendNodeToDom() {
  let prop = this.result[i]['someProperty'];
  let button = document.createElement('paper-button');
  let text = document.createTextNode(prop);

  button.appendChild(text);
  button.addEventListener('tap', this.go); // Add the listener to button
  this.shadowRoot.getElementById('buttons').appendChild(node);
}

go() {
  console.log('go');
}

---

只需注意一点：请记住，Polymer有很多工具可以避免执行直接的DOM操作。 如果只需要向列表中添加按钮，则可以考虑使用dom-repeat呈现按钮并在基础array属性上进行更改的解决方案。