Emitissão de múltiplos custom Events

Help/Ajuda
#1

Boa tarde!
Estou com uma dúvida simples com os custom events no bloco de dashboard custom HTML.
Montei um exemplo simples para explicar:

image
image1176×670 46.1 KB

Meu objetivo é que o bloco emissor crie dois custom events (com base no input) e cada um seja mostrado em um bloco separado. Repare que o bloco de cima funciona normalmente e o de baixo parece não receber o event apesar de o código ser extremamente similar…

O bloco emissor é criado da seguinte forma:

<script>
  const numero_1 = document.getElementById('input');
  numero_1.addEventListener('input', (n1) => {
    Dashboard.emitCustomEvent({
      numero_1: n1.target.value
    });
  });

  const numero_2 = document.getElementById('input2');
  numero_2.addEventListener('input2', (n2) => {
    Dashboard.emitCustomEvent({
      numero_2: n2.target.value
    });
  });
</script>

O receptor de cima, que está funcionando, tem seu código idêntico ao receptor de baixo (obviamente com os parametros do input 2).

Pergunto: o código acima representa a forma correta de emitir dois custom events?
Isso é um recurso relativamente recente na plataforma e eu gostaria de entendê-lo melhor.

Obrigado!

1 Curtida
#2

olá, Cesar!

Aparentemente está emitindo os “CustomEvents” da forma correta, mas depende de como está tratando o retorno, pois ambos os blocos (M1 e M2) receberiam as mensagens emitidas através de (DashboardBlock.on(‘customEvent’) ) e a partir dessas mensagens recebidas que mostraria nos respectivos blocos.

Mas, pela sua postagem, não conseguimos avaliar se está recebendo e fazendo as tratativas corretas nos blocos receptores.

Recomendamos passar um identificador na mensagem, ao invés de colocar no próprio nome do atributo, algo como:

{       
        input: "input2",
        value: n2.target.value     
}

ao invés de

{       
      numero_2: n2.target.value     
}

Nesse caso, seria possível verificar no receptor por


if (e.customEventData.input == 'input2') {}

ao invés de ter que verificar se o valor existe, que pode ser onde está o erro.

1 Curtida
#3

Oi, Alexandre.

Sua simples recomendação serviu para eu encontrar um erro muito básico: o eventListener não deveria estar associado ao ID e sim ao TIPO (“input” em vez de “input2”).

Esta é uma forma correta da emissão de dois customEvents simultâneos:

<div>
  <input type="text" id="primeiro_input"/>
  <input type="text" id="segundo_input"/>
</div>

<script>
  const emitter1 = document.getElementById('primeiro_input');
  emitter1.addEventListener('input', (e1) => {
      Dashboard.emitCustomEvent({
          input: "teste1",
          value: e1.target.value
      });
  });
  const emitter2 = document.getElementById('segundo_input');
  emitter2.addEventListener('input', (e2) => {
      Dashboard.emitCustomEvent({
          input: "teste2",
          value: e2.target.value
      });
  });
</script>

Agradeço!

1 Curtida
#4

Bom dia, Cesar!

Que bom que auxiliou!
Melhor ainda foi sua contribuição postando o código para auxiliar a quem tiver dúvidas!