jQuery: Почему спусковать не стрелять от объекта JS?
-
25-09-2019 - |
Вопрос
Я реализовал форму шаблона дизайна издателя / абонента в jQuery. Я в основном строительных классов в JavaScript использует CoffeeScript, который служит компонентами на моей странице. Т.е. навигация, DataList и т. Д.
Вместо того, чтобы у меня есть элементы 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);
}
Здесь вы видите предупреждение «Ура» - это то, что я хочу стрелять, но, к сожалению, мне не повезло здесь. По иронии судьбы я сделал то же самое с другим классом, реализованным тем же способом, отправленным пользовательским событием, и слушатель получают его просто в порядке. Любые идеи по тому, почему это не будет работать?
Обновлять:
Для обсуждения в комментариях он выглядит как журнал «Это» в консоли Возвращает объект JS, представляющий класс. Но ведение журнала «$ (this)» возвращает пустой объект jQuery, тем самым триггер никогда не будет уволен. Любые мысли о том, почему $ (это) подходит пустым, когда «это» точно возвращает экземпляр класса?
Решение
Я обнаружил, что jQuery не смогли индексировать свой объект, потому что класс реализовал свою собственную версию метода jQuery. В этом случае длина (). Переименование метода длины () для полного () полностью разрешена проблема, и любой экземпляр класса может успешно запустить события.