jQuery: Почему триггер не запускается из объекта JS? - PullRequest
Новая
       23

jQuery: Почему триггер не запускается из объекта JS?

4 голосов
/ 27 сентября 2010

Я реализовал форму шаблона проектирования издатель / подписчик в jQuery. Я в основном строю классы в Javascript, используя CoffeeScript, который служит компонентами на моей странице. то есть навигация, список данных и т. д.

Вместо того, чтобы элементы DOM запускали события, у меня есть экземпляры этих классов, которые используют триггер для отправки пользовательских событий. Эти экземпляры могут затем слушать друг друга и обновлять принадлежащие им элементы DOM соответственно на основе изменений в поведении друг друга!

Я знаю, что это работает, поскольку один из моих компонентов правильно отправляет пользовательское событие. Тем не менее, я столкнулся с загадкой. Я создал еще один компонент, и за свою жизнь не могу понять, почему его событие не запускается.

Это реализация моего класса: 

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);

Обратите внимание на: 

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

Этот код срабатывает правильно и возвращает ожидаемый тип события через предупреждение. Но перед оповещением он должен инициировать собственное событие. Здесь я сталкиваюсь со своей проблемой. 

$(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);
}

Вы видите здесь предупреждение "Ура" - это то, что я хочу выстрелить, но, к сожалению, мне здесь не повезло. По иронии судьбы я сделал то же самое с другим классом, реализованным таким же образом, отправляя пользовательское событие, и слушатель получает его очень хорошо. Есть идеи, почему это не сработает?

Обновление:

При обсуждении в комментариях выглядит, как запись "this" в консоли возвращает объект JS, представляющий класс. Но запись «$ (this)» возвращает пустой объект jQuery, поэтому триггер никогда не будет запущен. Любые мысли о том, почему $ (this) пусто, когда «this» точно возвращает экземпляр класса?

1 Ответ

1 голос
/ 28 сентября 2010

Я обнаружил, что jQuery не может индексировать мой объект, потому что класс реализует свою собственную версию метода jQuery. В этом случае length (). Переименование метода length () в total () полностью решило проблему, и любой экземпляр класса может успешно инициировать события.

...