Что такое Drupal.behaviors?
Drupal.behaviors — это объект внутри структуры Javascript в Drupal, который позволяет нам присоединять функции, которые должны выполняться в определенное время во время работы приложения.
Ядро Drupal вызовет Drupal.behaviors, когда DOM полностью загрузится, но это поведение можно вызвать снова.
Разница между Drupal.behaviors и document.ready
Преимущество Behaviors перед document.ready() или document.addEventListener(“DOMContentLoaded”, function(){}) заключается в том, что они автоматически повторно применяются к любому содержимому, загружаемому через AJAX.
document.ready() или document.addEventListener("DOMContentLoaded", function(){}) (код jQuery и JS) запускаются только один раз, когда DOM готов, но Drupal.behaviors можно запускать несколько раз во время выполнения страницы.
Например, в представлениях с бесконечной прокруткой больше элементов будет загружено, когда пользователь нажмет кнопку «Показать еще», следовательно, DOM изменится после начальной загрузки. Но Drupal будет вызывать прикрепленные поведения при загрузке DOM, а также при его изменении с помощью Ajax.
Что, если мы захотим добавить классы к вновь добавленным элементам? Здесь пригодится Drupal Behaviors. Кроме того, эти варианты поведения позволяют переопределить или расширить существующее поведение.
Как использовать?
В официальной документации Drupal говорится, что все модули должны интегрировать javascript с помощью Drupal.behaviors. Новый объект должен иметь как минимум метод присоединения.
Внутри файла JS вам необходимо добавить следующую структуру:
Drupal.behaviors.behaviorName = {
attach: function (context, settings) {
// Пользовательский код, который будет запускаться при загрузке страницы и при загрузке Ajax
$('.element-example', context).click(function () {
$(this).next('ul').toggle('show');
});
}
};
Как видите, нам нужно передать два аргумента контекст и настройки:
- Контекст: это измененный объект DOM, он относится к затронутому HTML. Это позволяет нам действовать в пределах затронутой области, например, при отправке формы Ajax контекстом будет только HTML формы.
- Настройки: содержит все настройки, введенные на стороне сервера. Этот аргумент добавлен в Drupal 8.
Важно отметить, что при первом вызове метода Attach() переменная контекста содержит объект документа, но при следующих вызовах переменная контекста будет содержать затронутый фрагмент HTML.
Поведение Drupal началось в Drupal 6, но оно изменилось:
// Поведение Drupal 8 и старше
Drupal.behaviors.behaviorName = {
Attach: function (context, settings) {
// Ваш собственный JavaScript находится внутри этой функции...
}
};
// Поведение Drupal 7
Drupal.behaviors.behaviorName = {
Attach: function(context) {
// Ваш собственный JavaScript находится внутри этой функции.
}
};
// Поведение Drupal 6
Drupal.behaviors.behaviorName = function(context) {
// Ваш собственный JavaScript находится внутри этой функции.
};
AttachBehaviors()
Мы можем увидеть эту функцию в файле misc/drupal.js:
// Прикрепляем все поведения
$(function () {
Drupal.attachBehaviors(document, Drupal.settings);
});
Помните, что в jQuery $(function() {}) — это сокращение для $(document).ready().
Здесь мы видим новый метод: Drupal.attachBehaviors(). Этот метод можно вызывать несколько раз после загрузки DOM. Например, ядро Drupal вызовет Drupal.attachBehaviors(), когда:
- Когда DOM будет готов;
- После загрузки административного наложения на страницу;
- После отправки API формы Ajax;
- Когда запрос Ajax возвращает команду, изменяющую HTML-код, например ajax_command_replace().
Кроме того, contrib и пользовательские модули могут выполнять Drupal.attachBehaviors().
Например:
- Ctools вызывает его после загрузки модального окна;
- Views вызывает его после загрузки новой страницы с помощью Ajax;
- Views вызывает его, когда у вас есть нумерация страниц и вы меняете страницу;
- Любой пользовательский модуль можно вызвать, выполнив метод в JS: Drupal.attachBehaviors().
Когда нам не нужно использовать Drupal.behaviors?
В целом Drupal предлагает нам всегда использовать Drupal.behaviors, однако бывают случаи, когда его использовать не удобно: когда нам нужно, чтобы JS-код выполнялся в один момент, например скрипт, определяющий поведение гамбургера меню. Нам понадобится его выполнение только тогда, когда DOM будет готов, и не более того, потому что это не повлияет на HTML, которым мы манипулируем в javascript.
Detach()
Обратным к методу Attach() является Drupal.behaviors.behaviorName.detach. Любой код метода detach() будет вызываться перед удалением содержимого страницы из DOM. Разрешение отсоединить поведение JavaScript от элемента перед его удалением. Это может быть особенно полезно для дорогостоящих задач, таких как опрос, которые могут продолжать выполняться в фоновом режиме, даже если элемент DOM, над которым они работают, был удален.
Drupal.behaviors.behaviorName.detach = function(context, Setting, Trigger) {
// Здесь ваш код
}
jQuery Once
Drupal.behaviors можно вызывать несколько раз, но если мы хотим запустить наш код только один раз, нам придется использовать Once().
jQuery Once гарантирует, что что-то будет обработано только один раз, добавляя класс в элемент DOM после выполнения кода.
Drupal.behaviors.behaviorName = {
attach: function(context, settings) {
$('.modal', context).once('remove-modals').each(function () {
// Делаем что-нибудь.
$(document).keyup(function (e) {
if (e.keyCode == 7) {
$('.modal', context).removeClass('modal-active');
}
})
})
},
detach: function(context, settings, trigger) {
$('.modal', context).removeOnce('remove-modals').each(function() {
// Отменить действие.
});
}
};
В этом примере код добавит класс удаления модалов при первом выполнении функции. Но при следующем вызове Drupal.attachBehaviors.once() найдет класс и пропустит его.
Заключение
Поведения будут вызываться первыми при загрузке DOM, и их можно вызывать несколько раз в контексте, представляющем новые дополнения или изменения в DOM.
