Globalny event dispatcher dla każdego przycisku w aplikacji

Globalny event dispatcher dla każdego przycisku w aplikacji
AdamWox
AdamWox
AdamWox
AdamWox
  • Rejestracja:ponad 7 lat
  • Ostatnio:dzień
  • Lokalizacja:Jastrzębie-Zdrój
  • Postów:2161
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ę.

Kopiuj
<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

Kopiuj
<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ęść

Kopiuj
const dispatch = createEventDispatcher();

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

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

edytowany 1x, ostatnio: Riddle
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
katakrowa
katakrowa
katakrowa
katakrowa
  • Rejestracja:ponad 10 lat
  • Ostatnio:około 2 lata
  • Lokalizacja:Chorzów
  • Postów:1670
0

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

Kopiuj
<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

Projektowanie i programowanie. Hobbystycznie elektronika i audio oszołom.
edytowany 1x, ostatnio: katakrowa
AdamWox
Yyyyy... To jest svelte, a nie "czysty" JS 🤔
katakrowa
No cóż. Zatem walcz z wiatrakami :-)
AdamWox
Nie mam problemów ze svelte. Jestem w stanie napisać taką samą aplikację jak w Angularze. W tym przypadku zależy mi na poukładaniu kodu, ponieważ robię swoje własne komponenty żeby nie powielać pierdyliarda klas z tailwind css dla takich elementów jak button, input, select, datepicker itp itd
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Xarviel
Xarviel
Xarviel
Xarviel
  • Rejestracja:ponad 3 lata
  • Ostatnio:około 8 godzin
  • Postów:847
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

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

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

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

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

<CustomButton on:click={handleClick}/>
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
AdamWox
AdamWox
AdamWox
AdamWox
  • Rejestracja:ponad 7 lat
  • Ostatnio:dzień
  • Lokalizacja:Jastrzębie-Zdrój
  • Postów:2161
0

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

edytowany 1x, ostatnio: AdamWox
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Xarviel
Xarviel
Xarviel
Xarviel
  • Rejestracja:ponad 3 lata
  • Ostatnio:około 8 godzin
  • Postów:847
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.

Kopiuj
<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.

edytowany 4x, ostatnio: Xarviel
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
AdamWox
AdamWox
AdamWox
AdamWox
  • Rejestracja:ponad 7 lat
  • Ostatnio:dzień
  • Lokalizacja:Jastrzębie-Zdrój
  • Postów:2161
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ę...

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto