Tratar con eventos de javascript aplicables solo para cierto contenido

Question

Tengo problemas para entender conceptualmente lo que debo hacer al intentar crear mi primera aplicación web de JavaScript grande.

Dependiendo de qué pestaña haya seleccionado un usuario, muestro contenido diferente dentro de un contenedor. El contenido es más que solo texto y utiliza diferentes funciones y eventos de javascript. Estoy usando el Yahoo! & Quot; TabView " implementación, pero la forma en que este problema debe ser manejado probablemente se aplique a otros enfoques de pestaña.

Lo que estaba pensando hacer era básicamente lo siguiente:

Crea módulos separados para cada pestaña (por ejemplo, MYAPP.modules.tabCalendar y MYAPP.modules.tabJournal). Cuando el usuario hace clic en una pestaña diferente (o navega con los botones del navegador a un estado de pestaña anterior), podría llamar a MYAPP.modules [oldModule] .disable () y MYAPP.modules [newModules] .enable (). Estas funciones suscribirían o anularían la suscripción de sus eventos personalizados (por ejemplo, un controlador de clic general adjunto al contenedor).

Un enfoque alternativo para tratar los eventos podría ser tener un solo controlador de clic global. Si el clic está dentro del contenedor, entonces determine qué pestaña está seleccionada actualmente y envíe el evento de clic a MYAPP.modules [currentTab] .onClick ().

O, el controlador global de clics puede activar un Evento personalizado al que se han suscrito los módulos desde la carga de la página, y los eventos onClick de cada módulo se ejecutarán y determinarán si deben hacer algo o no.

Parece que hay muchas opciones, pero me ha costado encontrar recursos que hablen sobre las mejores maneras de hacer cosas como esta. ¿Estoy en el camino correcto? ¿Cómo debo manejar esto?

Answer 1

Use los eventos que ya están integrados en TabView para poner en cola su JS para hacer cosas.

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

Para los cambios en las pestañas, se le indicarán las pestañas anteriores / siguientes seleccionadas, que serán más que suficientes para que su JS determine lo que debe hacer. Si quieres escribir una capa de traducción que mire los eventos y haga algo en función de eso, está bien, pero no es estrictamente necesario.

Answer 2

Estoy un poco confuso sobre el problema.

1. Sí, debes modularizar tu código.
2. Haga que cada módulo configure los controladores de eventos en los elementos en sus respectivos contenedores.

Eso es todo. YUI TabView maneja el cambio de pestaña para que no tenga que habilitar / deshabilitar nada.