Как установить поведение «на касании»с Javascript в полимере - PullRequest
Новая
       20

Как установить поведение «на касании»с Javascript в полимере

0 голосов
/ 20 февраля 2019

Я пытаюсь добавить paper-button к DOM на лету с помощью функции в Poylmer 2.x.

Я хотел бы, чтобы эта новая кнопка вызывала другую функцию при нажатии. 

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());

Как мне установить поведение «при касании» с Javascript в Polymer 2.x?

1 Ответ

0 голосов
/ 20 февраля 2019

Дело в том, что вы вызываете 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 отображает кнопки, а изменения вносятся в базовое свойство массива.

...