Gestire eventi javascript applicabili solo per determinati contenuti

Question

Ho difficoltà a capire concettualmente cosa dovrei fare mentre provo a realizzare la mia prima grande applicazione web javascript.

A seconda della scheda selezionata da un utente, visualizzo contenuti diversi all'interno di un contenitore. Il contenuto è molto più di un semplice testo e utilizza diverse funzioni ed eventi javascript. Sto usando Yahoo! UI Library " TabView " implementazione, ma il modo in cui questo problema dovrebbe essere gestito probabilmente si applicherebbe ad altri approcci Tab.

Quello che stavo pensando di fare era sostanzialmente il seguente:

Crea moduli separati per ogni scheda (ad esempio MYAPP.modules.tabCalendar e MYAPP.modules.tabJournal). Quando l'utente fa clic su una scheda diversa (o naviga con i pulsanti del browser su uno stato di scheda precedente), potrei chiamare MYAPP.modules [oldModule] .disable () e MYAPP.modules [newModules] .enable (). Queste funzioni sottoscriverebbero o cancellerebbero i loro eventi personalizzati (ad esempio, un gestore di clic generale allegato al contenitore).

Un approccio alternativo alla gestione degli eventi potrebbe essere quello di avere un singolo gestore di clic globale. Se il clic si trova all'interno del contenitore, determinare quale scheda è attualmente selezionata e inviare l'evento click a MYAPP.modules [currentTab] .onClick ().

In alternativa, il gestore di clic globale potrebbe generare un evento personalizzato a cui i moduli si sono abbonati dal caricamento della pagina e gli eventi onClick di ciascun modulo verranno eseguiti e determineranno se devono fare qualcosa.

Sembra che ci siano molte opzioni, ma ho avuto problemi a trovare risorse che parlano dei modi migliori per fare cose del genere. Sono sulla buona strada? Come dovrei gestirlo?

Answer 1

Usa gli eventi già integrati in TabView per mettere in coda il tuo JS per fare le cose.

http://developer.yahoo.com/yui/tabview/#handlingevents

Per le modifiche alle schede ti verranno comunicate le schede precedenti / successive selezionate e tali che dovrebbero essere più che sufficienti per il tuo JS per capire cosa dovrebbe fare. Se vuoi scrivere un livello di traduzione che guardi agli eventi e faccia qualcosa basato su di esso va bene, ma non è strettamente necessario.

Answer 2

Sono un po 'confuso sul problema.

1. Sì, dovresti modulare il tuo codice.
2. I gestori di eventi di ciascun modulo devono essere installati sugli elementi nei rispettivi contenitori.

Questo è tutto. YUI TabView gestisce il cambio di scheda, quindi non è necessario abilitare / disabilitare nulla.