Pregunta

he estado poniendo en práctica una forma de un patrón de diseño de editor / suscriptor en jQuery. Estoy básicamente la construcción de clases en JavaScript utilizando CoffeeScript que sirven como componentes en mi página. es decir, la navegación, DataList, etc.

En lugar de tener eventos de fuego elementos DOM, tengo instancias de estas clases que el uso de disparo en sí mismos para enviar eventos personalizados. Estos casos pueden escucharse unos a otros y pueden actualizar los elementos DOM que poseen en consecuencia sobre la base de los cambios en el comportamiento de cada uno de los demás!

Sé que esto funciona como tengo uno de mis componentes de despacho un evento personalizado correctamente. Sin embargo, he encontré con un obstáculo. He creado otro componente y para la vida de mí no puedo entender por qué de evento no está siendo despedido.

Esta es la implementación de mi clase:

window.List = (function() {
    List = function(element, settings) {
      var _a, _b, _c;
      this.list = $(element);
      this.settings = jQuery.extend(List.DEFAULTS, settings);
      this.links = this.list.find(this.settings.link_selector);
      this.links.selectable();
      _b = [SelectableEvent.COMPLETED, SelectableEvent.UNDONE, SelectableEvent.SELECTED, SelectableEvent.DESELECTED];
      for (_a = 0, _c = _b.length; _a < _c; _a++) {
        (function() {
          var event_type = _b[_a];
          return this.links.bind(event_type, __bind(function(event, selectable_event) {
            return this.dispatch(selectable_event);
          }, this));
        }).call(this);
      }
      return this;
    };
    List.DEFAULTS = {
      link_selector: "a",
      completed_selector: ".completed"
    };
    List.prototype.change = function(mode, previous_mode) {
      if (mode !== this.mode) {
        this.mode = mode;
        if (previous_mode) {
          this.list.removeClass(previous_mode);
        }
        return this.list.addClass(this.mode);
      }
    };
    List.prototype.length = function() {
      return this.links.length;
    };
    List.prototype.remaining = function() {
      return this.length() - this.list.find(this.settings.completed_selector).length;
    };
    List.prototype.dispatch = function(selectable_event) {
      $(this).trigger(selectable_event.type, selectable_event);
      return alert(selectable_event.type);
    };
    return List;
}).call(this);

Prestar atención a:

List.prototype.dispatch = function(selectable_event) {
    $(this).trigger(selectable_event.type, selectable_event);
    return alert(selectable_event.type);
};

Este código se activa correctamente y devuelve el tipo de evento espera a través de una alerta. Pero antes de que la alerta se espera para desencadenar un evento personalizado sobre sí mismo. Aquí es donde me encuentro con mi problema.

$(document).ready(function() {
    var list_change_handler, todo_list;
    todo_list = new List("ul.tasks");
    list_change_handler = function(event, selectable_event) {
      return alert("Hurray!");
    };
    $(todo_list).bind(SelectableEvent.COMPLETED, list_change_handler);
    $(todo_list).bind(SelectableEvent.UNDONE, list_change_handler);
    $(todo_list).bind(SelectableEvent.SELECTED, list_change_handler);
    $(todo_list).bind(SelectableEvent.DESELECTED, list_change_handler);
}

Aquí se puede apreciar la alerta "Viva" es lo que quiero fuego, pero por desgracia no estoy teniendo suerte aquí. Irónicamente he hecho exactamente lo mismo con otra clase implementa la misma manera el envío de un evento personalizado y el oyente lo recibe bien. ¿Alguna idea sobre por qué esto no funcionaría?

Actualización:

Por la discusión en los comentarios, parece que tala "este" en la consola devuelve el objeto de JS que representa la clase. Pero la tala "$ (this)" devuelve un objeto jQuery vacía, por lo tanto el gatillo nunca sería despedido. ¿Alguna idea de por qué $ (este) se acerca vacío cuando "esto" se precisa devolver la instancia de la clase?

¿Fue útil?

Solución

descubrí que jQuery no podía indexar mi objeto porque la clase implementa su propia versión de un método de jQuery. En este caso, la longitud (). Cambiar el nombre de la longitud () para total () resuelto el problema por completo y cualquier instancia de la clase puede con éxito eventos de disparo.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top