Boa tarde!
Estou com uma dúvida simples com os custom events no bloco de dashboard custom HTML.
Montei um exemplo simples para explicar:
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
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
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
Bom dia, Cesar!
Que bom que auxiliou!
Melhor ainda foi sua contribuição postando o código para auxiliar a quem tiver dúvidas!