Gestion des événements javascript applicables uniquement à certains contenus

Question

J'ai du mal à comprendre conceptuellement ce que je devrais faire en essayant de créer ma première grande application Web javascript.

En fonction de l'onglet sélectionné par l'utilisateur, j'affiche un contenu différent dans un conteneur. Le contenu est plus que du texte et utilise différentes fonctions et événements javascript. J'utilise Yahoo! La bibliothèque de l'interface utilisateur " TabView " mise en œuvre, mais la façon dont cette question devrait être traitée s’appliquerait probablement à d’autres approches par tabulation.

Ce que je pensais faire était fondamentalement le suivant:

Créez des modules distincts pour chaque onglet (par exemple, MYAPP.modules.tabCalendar et MYAPP.modules.tabJournal). Lorsque l'utilisateur clique sur un autre onglet (ou navigue avec les boutons du navigateur vers un état précédent), je peux appeler MYAPP.modules [oldModule] .disable () et MYAPP.modules [newModules] .enable (). Ces fonctions abonneraient ou désabonneraient leurs événements personnalisés (par exemple, un gestionnaire de clics général attaché au conteneur).

Une autre approche pour gérer les événements pourrait consister à utiliser un seul gestionnaire de clics global. Si le clic est à l'intérieur du conteneur, déterminez quel onglet est actuellement sélectionné et envoyez l'événement click à MYAPP.modules [currentTab] .onClick ().

Sinon, le gestionnaire de clics global peut déclencher un événement personnalisé auquel les modules se sont abonnés depuis le chargement de la page et les événements onClick de chaque module seront exécutés et détermineront s'ils doivent ou non faire quoi que ce soit.

Il semble y avoir beaucoup d’options, mais j’ai du mal à trouver des ressources qui parlent des meilleures façons de faire des choses comme celle-là. Suis-je sur le bon chemin? Comment dois-je gérer cela?

Answer 1

Utilisez les événements déjà intégrés à TabView pour mettre votre JS en file d'attente pour faire des choses.

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

Pour les changements d'onglet, les onglets précédents / suivants sélectionnés vous seront indiqués, ce qui devrait être plus que suffisant pour que votre JS sache ce qu'il doit faire. Si vous souhaitez écrire une couche de traduction qui examine les événements et effectue une action basée sur celle-ci, elle convient mais n'est pas strictement nécessaire.

Answer 2

Je suis un peu flou sur le problème.

1. Oui, vous devez modulariser votre code.
2. Demandez à chaque gestionnaire d’installation de module de gérer les éléments de leur conteneur respectif.

C'est ça. YUI TabView gère le changement d'onglet, vous n'avez donc pas besoin d'activer ou de désactiver quoi que ce soit.