6.8. Trabajo con JavaScript/jQuery en Drupal. ¿Qué son los behaviors?

Para comenzar, recordemos cómo incluir archivos JavaScript personalizados en nuestro tema. En el archivo .libraries.yml necesitas incluir la clave js:

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once

Es importante respetar la indentación de dos espacios. Así hemos incluido el archivo js/custom.js, pero esto no es suficiente para que jQuery funcione. Drupal no lo incluye por defecto, por lo tanto debe ser agregado explícitamente:

dependencies:
  - core/jquery

También usaremos jQuery.once(), un plugin adicional que permite ejecutar eventos o acciones solo una vez por elemento:

dependencies:
  - core/jquery
  - core/jquery.once

Esto es importante porque en Drupal el código JavaScript puede ejecutarse varias veces, especialmente en interacciones AJAX. Por eso usamos el método .once().

Agregando código en el archivo custom.js

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      $(context).find('.click-me').once('myCustomBehavior').click(function () {
        alert('¡Hola, mundo!');
      });
    }
  };
})(jQuery);

Encerramos el código jQuery en esta función porque Drupal ejecuta jQuery en modo .noConflict(), lo que evita conflictos con otras bibliotecas como Prototype o MooTools. Así, podemos usar el signo $ sin problemas dentro de nuestro contexto.

¿Qué son los behaviors en Drupal?

Si escribes código jQuery en Drupal, debes envolverlo en un behavior. El nombre del behavior debe ser único, como en el ejemplo myModuleBehavior. Puedes definir múltiples behaviors:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      // Tu código aquí.
    }
  };

  Drupal.behaviors.productPageBehavior = {
    attach: function (context, settings) {
      // Otro código aquí.
    }
  };
})(jQuery);

Usa notación camelCase para nombrarlos. Los behaviors se ejecutan cuando se carga la página y con cada solicitud AJAX. Esto los hace muy diferentes de:

$(document).ready(function () {
  // No se recomienda en Drupal.
});

El uso de .once() previene la ejecución duplicada del comportamiento:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      $('.inner').once('add-paragraph').append('<p>Prueba</p>');
    }
  };
})(jQuery);

Uso de context en los behaviors

Cada vez que Drupal carga contenido mediante AJAX, el nuevo contenido es accesible a través de la variable context. Así no necesitas recorrer todo el DOM cada vez, solo usar:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      $(context).find('.inner').once('add-paragraph').append('<p>Prueba</p>');
    }
  };
})(jQuery);

Ahora el comportamiento está implementado correctamente según el estilo de Drupal. Aunque puedes usar $(document).ready(), no se recomienda porque solo se ejecuta una vez y no con AJAX.

Si tienes preguntas sobre jQuery/JavaScript o sugerencias para nuevos temas, escríbelas en los comentarios.