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

Question

我正在尝试使用 Poylmer 2.x.

中的函数即时将 paper-button 附加到 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 设置 "on-tap" 行为？

Answer 1

事情是你调用 button 文本节点在中 paper-button 并在该节点上设置事件侦听器 - 作为 Text 节点 - 不触发事件（除了一些 exceptions）。

此外，您将 this.go() 作为回调传递给 addEventListener。这意味着 this.go() 被执行 然后 return 值作为回调传递（在这种情况下 undefined 因为在 console.log 你return 什么都没有）。您应该传递函数的标识符而不调用它：

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 呈现按钮并在基础数组属性.

上进行更改

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

How to Set `on-tap` Behavior of </paper-button> with Javascript in Polymer

javascript

appendchild

polymer