Почему базовые события при замене html не работают?

Если я храню представление в переменной window.myView, отрисуйте его, а затем вызовите консоль javascript:

$('#container').html('')

а затем вызовите:

$('#container').html(window.myView.$el)

Связанные события перестанут работать.

Я уверен, что это так, но:

  • почему именно он работает таким образом?
  • как перерисовать подчасти представления без потери привязок событий?
  • почему вызов myView.render() не потеряет привязки событий?

Update:

Нашел эту статью. Это причина?

Убедитесь, что jQuery не выгружает ваши события, когда вы не хотите его

Если вы создаете приложение, где вы создаете представления на лету, и присоединяете/удаляете их в dom, у вас может быть проблема. Каждый раз, когда вы удаляете представление из dom, jQuery выгружает все события. Таким образом, вы не можете ссылаться на представление и удалять его из dom, а затем повторно присоединить его позже. Все ваши события были бы разгружены. Если вы хотите сохранить взгляды вокруг, лучше всего скрыть их, используя display: none. Однако вы не должны злоупотреблять этим и перерабатывать представления, которые вы не собираетесь использовать какое-то время (и предотвратите утечку памяти).

ОТВЕТЫ

Ответ 1

jQuery empty, html и remove события очищают все события jquery и привязки данных, чтобы предотвратить утечку памяти (вы можете проверить исходный код jQuery для метода cleanData, чтобы узнать больше - это недокументированный метод)

view.render() не удаляет события, потому что события представления Backbone связаны с помощью делегирования событий и привязаны к представлению el, а не непосредственно к элементам в представлении.

Если вы хотите повторно использовать свои представления, вы можете удалить их с помощью метода jQuery detach, который связывает все события и данные, хотя вы должны следить за тем, чтобы не создавать утечки памяти таким образом. (jquery detach docs)

Если вы хотите перейти первым способом, вы всегда можете легко перенастроить события Backbone, используя метод Backbone.View delegateEvents. (базовый документ)

пс. он также более чист и более оптимален для использования jQuery .empty(), а не .html(''), поскольку метод jQuery html всегда вызывает пустую первую, чтобы очистить все события и данные, прежде чем вставить новый html. Также никогда не смешивайте jquery и собственный DOM innerHTML, поскольку это может привести к утечке памяти из-за не очищенных событий/данных jQuery