Globalny event dispatcher dla każdego przycisku w aplikacji

0

Witam.
Chciałbym stworzyć globalny kod w projekcie, który będzie odpowiadał za przekazywanie eventu kliknięcia do parenta. Ogólnie buduje sobie własne komponenty, które nie będą bardzo skomplikowane, głównie chodzi, aby ostylować element raz i wykorzystać go gdzie będzie potrzeba. Korzystam z tailwind.

PrimaryIconButton.svelte - podaje tylko ikonę.

<script>
  import { createEventDispatcher } from 'svelte';
  export let icon = '';

  const dispatch = createEventDispatcher();

  function clickHandle() {
    dispatch('click');
  }
</script>

<button
  on:click={clickHandle}
  class="bg-primary-500 rounded-md w-14 hover:bg-primary-600 active:bg-primary-700 p-3 flex items-center justify-center"
>
  <i class="{icon} text-3xl text-slate-50" />
</button>

PrimaryTextButton.svelte - podaje tekst oraz typ/kolor

<script>
  import { createEventDispatcher } from 'svelte';

  export let text = '';
  export let type = '';

  const dispatch = createEventDispatcher();

  function clickHandle() {
    dispatch('click');
  }
</script>

{#if type === 'primary'}
  <button
    on:click={clickHandle}
    class="bg-primary-500 rounded-md w-32 hover:bg-primary-600 active:bg-primary-700 text-slate-50 p-3 flex items-center justify-center"
  >
    {text}
  </button>
{:else if type === 'warn'}
  <button
    on:click={clickHandle}
    class="bg-red-500 rounded-md w-32 hover:bg-red-600 active:bg-red-700 text-slate-50 p-3 flex items-center justify-center"
  >
    {text}
  </button>
{/if}

Oba te komponenty mają ten sam clickHandle(), ponieważ logika kliknięcia będzie w parencie.

Potrzebuje tą część

const dispatch = createEventDispatcher();

function clickHandle() {
  dispatch('click');
}

zrobić "globalnie", aby nie powielać kodu.

0

Nie rozumiem. W JS parent domyślnie dostaje powiadomienie o kliknięciu elementu potomnego.

<html>
<body>
  <div id='myDiv' class='outer'>
    <button id='myBtn'>Buttton</button>
  </div>
  <style>
    .outer{
      background-color:yellow;
      padding:50px;
    }
  </style>    
  <script>
    document.getElementById ( 'myDiv' ).addEventListener ( 'click', ()=>console.log('div clicked'));
    document.getElementById ( 'myBtn' ).addEventListener ( 'click', ()=>console.log('button clicked'));  
  </script>
</body>
</html>

screenshot-20220516102427.png

2

Coś takiego nie zadziała w Twoim wypadku https://svelte.dev/examples/dom-event-forwarding ?

W swoich komponentach PrimaryIconButton.svelte/PrimaryTextButton.svelte, w których chcesz to wykorzystać podpinasz event bez podanej nazwy funkcji

<button on:click>Click me</button>

i w jakimś komponencie "rodzicu" definiujesz zawartość

<script>
	import CustomButton from './CustomButton.svelte';

	function handleClick() {
		alert('clicked');
	}
</script>

<CustomButton on:click={handleClick}/>
0

@Xarviel: WTF?! 😍 Hmmm 🤔 to do czego służy createEventDispatcher()? Jakim cudem to twoje działa?

1

@AdamWox nie korzystałem nigdy z Svelte, więc mogę się mylić, ale createEventDispatcher wygląda mi na taką możiwość z innych frameworków, że komponent "dziecko" przekazuje część danych do "rodzica" i wywołuje też swoje funkcjonalności.

<script>
const dispatch = createEventDispatcher();

function handleClick() {
  console.log('Akcja przed wywołaniem eventu rodzica');

  dispatch('click', { // Uruchomienie eventu rodzica i przekazanie do niego danych
    name: 'Bob',
    city: 'Warsaw',
    age: 25,
  });

  console.log('Akcja po wywołaniu eventu rodzica');
}
</script>

<button on:click={handleClick}>Kliknij mnie</button>

Wtedy mamy rozdzielone funkcjonalności na kilka komponentów, bo wywoła się coś z komponentu rodzica i dziecka.

Bez createEventDispatcher wywołujemy jedynie sam event rodzica bez żadnych modyfikacji.

EDIT:
Ja to tak rozumiem, ale musiałbyś jeszcze doczytać dla pewności.

0

I dokładnie o to mi chodziło. Całą logikę mam po stronie rodzica, ponieważ komponent PrimaryButton jest tylko dla ujednolicenia kodu i nie klepania znowu tych samych klas. To jest tylko UI i te elementy w moim projekcie nie mają żadnej swojej logiki. Dzięki za pomoc, znowu muszę nadrobić braki i zacząć czytać dokumentację...

1 użytkowników online, w tym zalogowanych: 0, gości: 1