Déclenchement d'un CustomEvent à partir d'un élément dans dom-repeat

Question

Bonjour, j'ai ce problème avec un modèle dom-repeat. J'ai un élément avec un dom-repeat et à l'intérieur j'affiche un élément my-item, j'ai un bouton qui a déclenché un événement personnalisé et je dois récupérer cet événement dans l'élément parent mais je n'arrive pas à le faire fonctionner. Avez-vous des idées à ce sujet ? Pourquoi je n'obtiens jamais updateFired(e) appelé ?

Élément : my-view

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

Élément : mon-article

<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

De la manière dont vous avez écrit le gestionnaire d'événement, le nom de votre événement devrait être " mise à jour ", et non " onUpdate ". Le site on- est ajouté uniquement pour définir le gestionnaire d'événement, le nom de l'événement réel doit être la partie qui le suit.

Vous devez donc modifier

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

à

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

Answer 2

Sur votre HTML, faites quelque chose comme :

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

Et dans votre javascript :

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

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