Appunti AlpineJS

1 – Eventi

$dispatch('nomeEvento',oggetto) equivale a window.dispatchEvent(new CustomEvent('nomeEvento', oggetto).

In javascript, se non serve l’oggetto si può usare new Event('nomeEvento').

All’oggetto si accede con $event.detail.

2 – Lookup Table

Sono utili per i filtri:

filteredItems($filter = 'filter1'){
 return {
   filter1 : ...,
   filter2 : ...,
   filter3 : ...,
 }[$filter]; // ad ogni oggetto si può accedere con dot o array notation
}

o per la blade @props:

'colors' => [
   'red' => 1,
   'blue' => 2
]
$colors[$color]

3 – Estrazione Javascript

La logica di x-data o x-int può essere estratta in file js il cui contenuto va assegnato a una variabile window scoped.

Nei file javascript estratti si possono dichiarare i costruttori:

window.objectName = fn (params) { this.name = val; } // si possono usare anche i metodi

4 – Alpine Watch

$watch('open', value => console.log(value))

5 – LocalStorage

In un modulo javascript:

window.storeName = {
 arrayName: JSON.parse( localStorage.getItems('nome') || [] ),
 add() {},
 remove() {},
 update() {},
 save() { // va chiamato ogni volta che l'array viene aggiornato (con deep watch)
  localStorage.setItem('nome', JSON.stringify(this.arrayName));
 }
}

in x-data si aggiunge la riga ...storeName come variabile, che equivale a fare un merge di attributi e funzioni.