DelegateEvents в backbone.js

Может кто-нибудь объяснить мне, что делает делегат в backbone.js? Документация не помогла мне понять.

Мое точное использование:

У меня есть основной вид X с внутренним представлением Y. Они отлично работают, но если я перейду к основному виду Z, а затем вернусь к X (повторное использование, а не воссоздание), события, связанные с Y дочерними элементами, будут потеряны. delegateEvents решает это, но Я хочу понять, почему.

Ответы

Ответ 1

По сути, когда вы вызываете .remove(), это прокси-сервер функции jQuery remove, которая удаляет элемент из DOM, а также всех связанных события из хеш события, которые были связаны с элементом.

Элемент Backbone View по-прежнему содержит .el, но после повторной установки в DOM элемент jQuery потерял все связанные с ним прослушиватели.

Существует несколько решений:

  • Полностью уничтожить элемент вида, включая отключение всех событий модели/контроллера с помощью нового метода destroy (в настоящее время только в github, он будет добавлен в следующий выпуск Backbone) и создать новое представление при возвращении (а не просто кэширование и повторный рендеринг) - мой предпочтительный метод

  • Создайте метод (или продолжите удаление), чтобы использовать jQuery detatch, который, по-видимому, делает то же самое, что и удаление без потери привязок событий - не сделал этого но похоже, что это сработает

  • Вызов .delegateEvents() в каждом рендере - то, что вы сейчас делаете сейчас

Надеюсь, что это поможет.

Ответ 2

delegateEvents принимает объявление events: { ... } для вашего экземпляра представления и связывает указанные события с указанными элементами DOM с указанными методами обратного вызова для обработки событий.

Итак, дерево DOM, которое выглядит следующим образом:

<div> 
  <a href="#" id="foo">foo</a>
</div>

И представление, определенное следующим образом:


Backbone.View.extend({
  events: {
    "click .foo": "fooClicked"
  },

  fooClicked: function(e){
    // handle the click, here
  },

  render: function(){
    // render the specified HTML, here
  }
});

будет правильно обрабатывать щелчок по ссылке "foo", чтобы вы могли реагировать на щелчок в коде.

Пробой объявления events: "eventname selector": "callback" где "eventname" - это любое событие DOM, например "click". "Селектор" - это любой допустимый селектор jQuery, который запускается против вашего представления el для элемента DOM для привязки события. "callback" - это имя метода в этом представлении для вызова, когда происходит событие для этого элемента DOM.

надеюсь, что поможет