Der Umgang mit JavaScript-Ereignisse gelten nur für bestimmte Inhalte

Question

Ich habe Probleme zu verstehen, konzeptionell, was ich tun soll, bei dem Versuch, meine erste große Javascript-Web-Anwendung zu machen.

Je nachdem, welche Registerkarte ein Benutzer ausgewählt hat, zeige ich verschiedene Inhalte in einem Container. Der Inhalt ist mehr als nur Text und verwendet verschiedene JavaScript-Funktionen und Ereignisse. Ich bin mit dem Yahoo! UI Library „TabView“ Umsetzung, aber die Art und Weise, dass diese Frage behandelt werden sollte wahrscheinlich auf andere Tab Ansätze gelten.

Was ich dachte zu tun war im Grunde die folgenden:

Erstellen Sie separate Module für jede Registerkarte (z MYAPP.modules.tabCalendar und MYAPP.modules.tabJournal). Wenn der Benutzer auf einem anderen Tab klickt (oder navigiert mit Browser-Tasten auf einen vorherigen Registerkarte Zustand), könnte ich nennen MYAPP.modules [oldModule] .disable () und MYAPP.modules [newModules] .enable (). Diese Funktionen würden abonnieren oder ihre benutzerdefinierten Ereignisse abmelden (zum Beispiel ein allgemeiner Click-Handler an den Behälter angebracht).

Ein alternativer Ansatz mit Ereignissen zu tun haben könnte einen einzigen globalen Click-Handler zu haben sein. Wenn der Klick im Innern des Behälters ist, dann bestimmen, welche Register aktuell ausgewählt ist und das Click-Ereignis zu MYAPP.modules senden [aktuellerReiter] .onClick ().

Oder könnte die globale Click-Handler ein benutzerdefiniertes Ereignis, zu dem Feuer haben die Module seit Laden der Seite abonniert, und jedes onClick Veranstaltungen des Moduls ausgeführt werden soll und bestimmen, ob sie sollten nichts tun.

Es scheint eine Menge von Optionen zu sein, aber ich habe Probleme bei der Suche Ressourcen wurde mit, die über die besten Möglichkeiten sprechen Dinge wie dies zu tun. Bin ich auf dem richtigen Weg? Wie soll ich damit umgehen?

Answer 1

Verwenden Sie die Ereignisse bereits in TabView gebaut Ihre JS Warteschlange Dinge zu tun.

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

Für Registerkarte ändert Sie die vorherigen / nächsten Registerkarten gesagt werden ausgewählt und solche, die mehr als genug sein sollte für Ihre JS, um herauszufinden, was es tun soll. Wenn Sie eine Übersetzungsschicht zu schreiben, die auf den Ereignisse aussehen würden und etwas darauf basierend tun, das ist in Ordnung, aber es ist nicht unbedingt notwendig.

Answer 2

Ich bin ein bisschen auf das Problem unscharf.

1. Ja, Sie sollten Ihren Code modularisieren.
2. Haben Sie jedes Modul Setup-Event-Handler auf die Elemente in ihren jeweiligen Behälter.

Das ist es. YUI TabView nimmt die Registerkarte Schalt so müssen Sie etwas nicht aktivieren / deaktivieren.