Запустите CustomEvent из элемента в dom-repeat

Question

Здравствуйте, у меня есть эта проблема с шаблоном повторения dom. У меня есть элемент с dom-repeat, и внутри я показываю элемент my-item, у меня есть кнопка, которая запустила пользовательское событие, и мне нужно получить это событие в родительском элементе, но я не могу заставить его работать. Есть мысли по этому поводу? Почему мне никогда не звонят updateFired(e)?

Элемент: my-view

<template is="dom-repeat" items="{{employees}}">
      <my-item employee="[[item]]" on-update="updateFired"></my-item>
    </template>
    updateFired(e) {
      console.log(e);
    }

Элемент: my-item

<div class="container">
        <div>First name: <span>[[employee.first]]</span></div>
        <div>Last name: <span>[[employee.last]]</span></div>
        <button on-click="testClick">Click</button>
    </div>
    testClick(e) {
        const event = new CustomEvent('onUpdate', { bubbles: true, composed: true, detail: this.employee });
        this.dispatchEvent(event);
     }

Answer 1

На вашем HTML сделайте что-то вроде:

<div id="foo" style="width:20px;height:20px;background-color:#ffcc00;" onclick="javascript:updateFired(event)"></div>

А в вашем javascript:

const el = document.getElementById('foo');
el.onclick = showFoo;


function showFoo() {
  alert('Clicked!');
}

Answer 2

В том, как вы написали обработчик событий, ваше имя должно быть « update », а не « onUpdate ». Префикс on- добавлен только для определения обработчика события, фактическое имя события должно быть частью после него.

Так что вам нужно изменить

const event = new CustomEvent('onUpdate', { bubbles: true, composed: true, detail: this.employee });

до

const event = new CustomEvent('update', { bubbles: true, composed: true, detail: this.employee });