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中设置Java的“轻按”行为？

Answer 1

问题是您要在button内的文本节点中paper-button调用，并在该节点上设置事件侦听器-该节点是Text节点-不触发事件（除某些exceptions之外）。

此外，您正在将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呈现按钮并在基础数组属性上进行更改的解决方案。

如何在Polymer中设置Java的on-tap行为

1 个答案: