La gestión de eventos personalizados jQuery

Question

he hecho unas cuantas horas de investigación adicional, pero todavía no puede encontrar un buen patrón a lo que yo creo que es un problema común.

Estoy trabajando en una aplicación .Net MVC2. Nuestra aplicación se compone de una página principal, entonces una serie de vistas parciales (páginas incluidas) cada una de las vistas parciales corresponde a un widget que consisten en un estructura HTML y JS-jQuery tripas

Algunos de nuestros widgets tienen interacciones ricas entre sí así que por supuesto que estamos utilizando caso de que algo unión del jQuery para el efecto de esto:

Resumen de datos Widget

$(document).bind("DataUpdated", summaryobject.updateTotals());

Widget de manipulación de datos

$(document).trigger("DataUpdated");

El problema que estamos teniendo es que a medida que el usuario navega a partes de las aplicaciones (HTML / DOM) se eliminan estos widgets de la página y reemplazar con el nuevo conjunto de puntos de vista parciales. Cuando un usuario navega atrás el código HTML (representación visual) se vuelve a cargar junto con el jQuery vinculante que crea una unión doble.

Hasta ahora mis soluciones parecen cojo a mí.

(1) se unen al objeto DOM la unión es para:

$("#summaryobject").bind("DataUpdated", summaryobject.updateTotals());

El problema con esto es que entonces mi desencadenar necesidades de widgets para saber lo DOM bject a gatillo en:. $("#summaryobject") qué tipo de derrotas el propósito

(2) Crear un objeto EventBus a las vías que une qué eventos y sólo permiten eventos en obligarse vez. El problema que estoy teniendo es la hora de almacenar / unión de los eventos que no puedo realizar un seguimiento de quién lo creó, así que no puede anular el registro que si necesito .... quizás eventos no registrada, no caso necesario.

¿Qué son los patrones de otras personas que utilizan para gestionar eventos personalizados?

Answer 1

terminé haciendo esto por ahora:

bajo mi objeto PageManager me escribió este método

function PageManager() {
    this.eventBusRegistry = [];

    ///<summary>Registers Event if not already bound</summary>
    this.registerForEvent = function (eventName, eventOwner, functionToBind) {
        if (this.eventBusRegistry[eventName + eventOwner] == null) {
            this.eventBusRegistry[eventName + eventOwner] = "BOUND";
            $(document).bind(eventName, functionToBind);
        }
    }
}

Para mi clase de widgets que hice esto.

   ///<summary>Widget</summary>
    function Widget(inWidgetName) {

        //the data you wish to update.
        this.data = {};
        //name of widget
        this.widgetName = inWidgetName;
    }

    Widget.prototype.registerForEvent = function (eventName, functiontoBind) {
       //Session is the instance of PageManager
        Session.registerForEvent(eventName, this.widgetName, functiontoBind);
    };

En cualquier caso de un widget se llama registerForEvent a eventos de vinculación.

Esto está lejos de ser una solución perfecta. Nuestro diseño todavía tendrá pérdidas de memoria en el que nosotros no anular el registro de los objetos JS. Sin embargo, nuestros objetos se sobreescriben cada vez que se cargan por lo peor de los casos es que todos los objetos de la aplicación puede ser registrado una vez, incluso si no se utilizan.

Sin embargo, la unión de un método a un evento se une al objeto de documento que no se sobrescribe o curso. Lo que este código nos impedirá volver a vincular. Todavía tenemos un poco de una configuración descuidado sin embargo es ramificaciones deben reducirse al mínimo.

Answer 2

Hay dos buenas soluciones a su problema (que puedo ver).

1. Eliminar todas las llamadas bind y reemplazarlos con una sola llamada a delegate o live y establecer una escucha que escuchará todos de los acontecimientos que se producen en su aplicación y rutas a los lugares apropiados. (En otras palabras, crear un controlador).

2. Utilice un EventBus que permite dar de baja los eventos, así como suscrito. La forma más sencilla que he visto hacer esto con un EventBus es de Pedro Michaux Prueba Completa guión.

---

/* 
Extremely loosely coupled custom events
Source: 
http://peter.michaux.ca/articles/anonymous-events-extremely-loose-coupling
*/

EventManager = {};

EventManager.events = {};

EventManager.subscribe = function( event_name, subscriber, method_name ) {
    var event = this.events[event_name];
    if ( ! event ) {
        event = this.events[event_name] = [];
    }
    event.push( { s: subscriber, m: method_name } );
    return this;
};

EventManager.unsubscribe = function( event_name, subscriber ) {
    var event = this.events[event_name];
    if ( ! event ) {
        return;
    }
    for ( var i = event.length - 1; i >= 0; i-- ) {
        if ( event[i].s === subscriber ) {
            event.splice( i, 1 );
        }
    }
    return this;
};

EventManager.unsubscribe_all = function( event_name ) {
    delete this.events[event_name];
    return this;
};

EventManager.fire = function( event_name ) {
    var event = this.events[event_name];
    if ( ! event ) {
        return this;
    }
    for ( var i = event.length - 1; i >= 0; i-- ) {
        subscription = event[i];
        subscription.s[subscription.m].apply( subscription.s, arguments );
    }
    return this;
};

Un ejemplo del uso de este segundo método sería:

EventManager.subscribe("DataUpdated", summaryobject, "updateTotals");
// ... at some point later on ...
EventManager.fire("DataUpdated");
// Fires `updateTotals` with `this` bound to `summaryobject`

Answer 3

Se podría probar un par de cosas, como:

1. namespacing sus tipos de eventos. De esta manera, si bien no la creación de una unión entre dos Ver casos específicos, se puede crear una relación generalizada entre los tipos de vistas. De tu ejemplo anterior:

   Resumen de datos artefacto A

   $(document).bind("DataUpdated.Statistics", summaryobject.updateTotals());
   

   La manipulación de datos artefacto A

   $(document).trigger("DataUpdated.Statistics");
   

   Salida de la documentación aquí: http://api.jquery.com/bind/

2. Descarga de los controladores de eventos Cuando un widget o grupo de ellas se descarga, antes de cargar el nueva DOM / manipuladores.

Answer 4

¿Ha intentado utilizar el método de unión live()?