Привязка щелчка нокаута после пузырьков

#knockout.js #event-bubbling

#knockout.js #событие-пузырькование

Вопрос:

Есть ли способ заставить щелчок запускаться после того, как событие пузырится? В приведенном ниже сценарии нажатие на span запускает функцию removeChildNode, которая удаляет span из dom. это предотвращает запуск щелчка span от щелчка на узле ‘div [data-identifier]’. Я бы хотел, чтобы событие всплывало, а затем выполнялась функция.

 <div data-identifier>
  <div data-bind="click: removeChildNode">
    <span>Click Me!</span>
  </div>
</div>

removeChildNode = function() { $(arguments[1].target).children()[0].remove(); }

$('body').on("click", 'span', function(event) {
  // use the span to navigate around and do something interesting
  $(event.target).closest('div[data-identifier]').click();
});

Ответ №1:

Если вы собираетесь использовать Knockout, вам нужно позволить ему управлять DOM, и вы управляете своей viewmodel. У вас должен быть некоторый объект viewmodel, который представляет удаляемый дочерний элемент, и ваша removeChildNode функция удалит его (или установит его в состояние, указывающее, что он удален). Как правило, селекторы jQuery указывают, что вам не удалось что-то смоделировать.

Нет смысла иметь два способа настройки событий щелчка. Если вы собираетесь использовать событие щелчка jQuery в одном месте, вам следует использовать jQuery для всех ваших событий щелчка, а не использовать Knockout.

Тем не менее, по умолчанию нокаут позволяет событиям всплывать. Вы могли бы поместить a setTimeout вокруг удаления узла, чтобы дать DOM время для распространения событий перед удалением узла, если это мешает вашему внешнему щелчку. У вас будет меньше проблем такого рода, если вы полностью оставите DOM для нокаута.

Ответ №2:

Вы должны обернуть привязку щелчка следующим образом

 data-bind="click: function(){setTimeout(removeChildNode(),20);return true;}"

Установив время ожидания, вы отложите выполнение removeChildNode.

Обернув ваш вызов в функцию, вы можете затем немедленно вернуть true, что, я думаю, говорит koJs о пузырьковом событии. Таким образом, вы достигаете пузырьков и выполняете removeChild после некоторой задержки.

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