Caso d'uso:
Per un'interfaccia utente di amministrazione, voglio un widget di tabella interattiva con un numero di comportamenti:
- Comprimi / espandi (sì, questo significa che le righe sono una gerarchia)
- Aggiornamento dei dati in una cella figlio basato su una cella genitrice.
- Nascondere o rivelare una riga o un intero sotto-albero basato su un aggiornamento del valore.
- Due o più elementi del form in ogni riga, che possono dipendere l'uno dall'altro. Per esempio. una casella di controllo che farà confusione con il valore di un campo di testo nella stessa riga.
- Manipolazione DOM sulle righe appena create. Per esempio. la casella di controllo potrebbe essere trasformata in un tipo più visivo di widget. O
In un altro caso d'uso, ho i seguenti comportamenti aggiuntivi:
- Aggiunta e rimozione di righe, manualmente o automaticamente.
- Trascina e rilascia le righe. (probabilmente non in combinazione con il collapse / expand, ma chi lo sa)
Il problema:
- Idealmente, vogliamo che ciascuno di questi comportamenti sia implementato come modulo / plugin separato e indipendente. MA
- Se un comportamento cambia il DOM, allora altri comportamenti devono saperlo. Per esempio. se inserisci una riga, allora il collasso / espandi deve sapere, per decidere se la nuova riga deve essere mostrata o nascosta. E la riga appena aggiunta ha bisogno di nuovi listener di eventi da vari altri comportamenti.
- Potrebbero esserci comportamenti innescati dallo stato di altri comportamenti. Per esempio. ogni riga potrebbe contenere un campo di testo e, a seconda del valore, la riga deve essere spostata verso l'alto o verso il basso (trascina / rilascia).
La domanda:
Ho dovuto affrontare questo tipo di problema un paio di volte e generalmente sono riuscito a farlo funzionare. Tuttavia, ho sempre odiato l'architettura che ne è uscita.
Quello che mi piacerebbe è un approccio che consente di creare i diversi comportamenti come moduli indipendenti e quindi in qualche modo collegarli tra loro.
Alcune domande più specifiche:
- Dove dovrebbero ciascuno dei comportamenti mantenere le informazioni di stato
- Per quanto riguarda le informazioni di stato per una riga della tabella specifica? Dovrebbe essere memorizzato come variabile sull'elemento DOM? (ad esempio
$('tr')[5].isExpanded = true) o piuttosto in un contenitore di dati nel modulo stesso? - Come possono sapere i moduli sugli aggiornamenti DOM?
- In che modo i moduli devono comunicare tra loro?
- Come dovrebbe essere strutturato il codice di ogni modulo? Che tipo di API dovrebbe esporre?
- Come gestire più istanze di questo tipo di widget su una pagina? (In questo caso, le istanze globali non funzionano)
Esempio: link (mi dispiace, tutto quello che ho atm è i moduli Drupal)