Как добавить прослушиватель событий в элементы шаблона веб-компонента - PullRequest
Новая
       49

Как добавить прослушиватель событий в элементы шаблона веб-компонента

0 голосов
/ 02 августа 2020

Я создаю клон Twitter с некоторыми добавленными функциями для своего портфолио. Я использую тег шаблона веб-компонента для создания шаблона твита, а затем использую importNode для его рендеринга в DOM при нажатии кнопки публикации твита. Это работает нормально.

Я добавил кнопку редактирования, которая должна запускать функцию при нажатии: 

         tweetTemplate.content.querySelector('#button').onclick = () =>{
            createTweetContainer.style.display = "block";
            console.log("edit button clicked");
        }

Однако это не работает. Контейнер создания твита должен быть виден при нажатии кнопки. Я также хочу, чтобы кнопка была уникальной для каждого импортированного шаблона, поскольку пользователь должен иметь возможность редактировать этот конкретный c твит, даже если это один и тот же шаблон.

Я прочитал несколько руководств по веб-компонентам, настраиваемым элементы, тень DOM и т. д. c. Но я застрял в том, как собрать ie все это вместе для этой конкретной c задачи.

Любая помощь по следующим шагам приветствуется. Спасибо.

JS FIDDLE: https://jsfiddle.net/manoj1234/zoL5s10g/12/

Обновление:

Я добавил слушателя событий к импортированному узлу, а не к шаблону как таковому: 

tweetInstance.querySelectorAll('button')[0].onclick = () =>{
    createTweetContainer.style.display = "block";
    console.log("edit button clicked");
}

Но теперь я получаю эту ошибку: Uncaught TypeError: невозможно установить свойство onclick для undefined в HTMLButtonElement.postTweetButton.onclick (script . js: 59)

1 Ответ

1 голос
/ 04 августа 2020

Просто измените последовательность работы. В настоящее время вы сначала добавляете в DOM, а затем пытаетесь присоединить обработчик событий. Вместо этого сначала прикрепите обработчик событий, а затем добавьте его в DOM. Это последняя версия: 

tweetInstance.querySelector('#button').onclick = () => {
    createTweetContainer.style.display = "block";
    console.log("edit button clicked");
}

// Then append to the DOM
pinnedTweet.after(tweetInstance);

Причина, по которой это происходит, заключается в том, что когда вы используете importNode, он фактически возвращает экземпляр DocumentFragment. Свойство intrinsi c для DocumentFragment состоит в том, что становится пустым, когда вы присоединяете его дочерние элементы к фактическому дереву DOM . Итак, querySelector на фрагменте не действует. Таким образом, идеальный рабочий процесс с DocumentFragment - сначала выполнить все операции, а затем, наконец, добавить в DOM.

...