Qual è la migliore strategia di implementazione per questo widget html + javascript?

1

Il problema
Ho trovato questa variante di selezione in risposta a una domanda su UX.SE: link

Tuttavia, capire come implementarlo mi ha fatto impazzire da quando ho scritto quel post.

Quello che ho provato
Inizialmente ho pensato che sarebbe stato abbastanza facile da fare.

La strategia che avrei preso sarebbe quella di modellare tutte le opzioni in un oggetto javascript, con il loro nome e le proprietà selezionate, e quindi scrivere una funzione di visualizzazione per visualizzarle come un elenco non ordinato o qualcosa del genere.

Potrei quindi creare il pulsante come un altro oggetto javascript, modellandone il proprio stato e avere una funzione di visualizzazione che ne sputa una rappresentazione nel widget. Magari inserisci un codice di evento per la transizione tra gli stati dei pulsanti e ho finito.

Dove sono bloccato
Più pensavo a questo approccio, più mi rendevo conto che avere tutto lo stato seduto in oggetti javascript era una pessima idea. Ho pensato che probabilmente dovrei memorizzare lo stato nel dom e mutarlo con javascript.

Tuttavia non ho idea chiara di come sarebbe il tipo di architettura o di come dovrei codificarlo.

Puoi aiutarmi a capire quale sia la migliore strategia di implementazione di alto livello per questo tipo di widget?

    
posta Racheet 13.12.2013 - 12:38
fonte

1 risposta

4

Perché penseresti che avere lo stato in js sarebbe negativo? Penso che sia buono come nel DOM, se non meglio.

In ogni caso, molto probabilmente hai già lo stato nel DOM, poiché per scopi di visualizzazione dovrai aggiungere / rimuovere classi dagli elementi della lista. In questi casi, spesso lascio che jQuery trovi tutti gli elementi con una certa classe all'interno della lista. Ottieni la quantità di questi elementi e sai già quanti sono stati selezionati.

Metti tutta questa funzionalità (conta gli oggetti con la classe "selected_list_thing", aggiorna lo stato del pulsante) in una funzione e aggiungi un gestore di clic del mouse agli elementi della tua lista. Qui si passa alla classe (ad esempio, aggiungi o rimuovi "selected_list_thing" è blu) e quindi chiama la funzione che hai definito per aggiornare il pulsante.

    
risposta data 13.12.2013 - 12:50
fonte

Leggi altre domande sui tag