Я думал, что использование поведения похоже на использование
jQuery(document).ready(function ($), поэтому код будет только
выполняется, когда DOM был полностью загружен, и не понимаю, почему это
вызывается для пяти различных контекстов.
Нет. Если бы это было так, поведение было бы бессмысленным.
- Поведения привязаны к одному узлу DOM, потому что в Drupal вы не знаете, когда этот узел DOM визуализируется/вставляется на страницу (вспомните BigPipe, представления Ajax, корзины покупок Ajax и т. д.).
- Поведения запускаются в первый раз после того, как DOM готов, И, возможно, очень часто впоследствии, когда в DOM вводятся новые партиалы. Чтобы избежать дублирования прослушивателей событий на уже существующих, старые узлы используют
однажды-функция.
-
контекст просто ускоряет отсоединение и повторное присоединение поведения, если вы опускаете контекст, любая инъекция узла DOM должна искать потенциальные поведения во всем документе, а не только внутри контекста вновь введенного частичного.
- Эквивалент
$(документ).готов() будет звонить $(документ, контекст).once() внутри поведения, потому что контекст документа передается только один раз.
Код вашего цикла будет выглядеть так:
Drupal.behaviors.myCustomBehavior= {
прикрепить: функция (контекст, настройки) {
$('.section-wrapper', контекст).once('myCustomOnceId').each( function(index) {
$(это).addClass('foo');
});
}
};
Так, например. если твой <div class="section-wrapper"> находится внутри строки представления с бесконечной прокруткой, каждый <div> получит ровно один фу класс, независимо от того, когда он загружен.
Продолжая приведенный выше пример с представлением бесконечной прокрутки и классом "foo", после двух инъекций Ajax...
... без использования поведения вы получите что-то вроде
<div class="section-wrapper foo"></div><div class="section-wrapper"></div><div class="section-wrapper"></div>
...используя поведение без однажды, вы получите что-то вроде
<div class="section-wrapper foo foo foo"></div><div class="section-wrapper foo foo"></div><div class="section-wrapper foo"></div>
