从 dom-repeat 中的元素触发 CustomEvent

Question

您好，我遇到了 dom-repeat 模板的问题。我有一个带有 dom-repeat 的元素，在里面我显示了一个 my-item 元素，我有一个触发自定义事件的按钮，我需要在父元素中获取该事件，但我做不到让它起作用。对此有什么想法吗？为什么我从来没有接到 updateFired(e) 电话？

Element: my-view

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

Element: 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

按照您编写事件处理程序的方式，您的事件名称应该是“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 });

Answer 2

在您的 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!');
}

从 dom-repeat 中的元素触发 CustomEvent

Fire a CustomEvent from element in dom-repeat

javascript

web-component

polymer

dom-repeat