6.8. Lavorare con JavaScript/jQuery in Drupal. Cosa sono i behaviors?

Per iniziare, vediamo come includere file JavaScript personalizzati nel nostro tema. Nel file .libraries.yml dobbiamo aggiungere il riferimento al nostro file 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

È importante mantenere i rientri di due spazi corretti. Abbiamo incluso il file js/custom.js, ma non basta perché jQuery funzioni. Infatti, il core di Drupal non richiede jQuery di default, quindi va incluso esplicitamente:

dependencies:
  - core/jquery

Utilizzeremo anche jQuery.once(), un plugin separato che consente di applicare eventi e metodi a un selettore solo una volta.

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

Questo è necessario perché il codice JavaScript che scriviamo in Drupal può essere eseguito più volte in risposta a vari eventi. Per evitare che gli stessi eventi vengano duplicati, utilizzeremo quindi il metodo .once().

Ora aggiungiamo del codice nel file custom.js:

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

Vediamolo passo per passo.

(function ($) {
 
})(jQuery);

Racchiudiamo il codice jQuery in questa struttura perché Drupal esegue jQuery in modalità .noConflict(). Questo serve a evitare conflitti con altri framework JavaScript come Prototype o MooTools, consentendo comunque l’uso del simbolo $. È quindi necessario racchiudere tutto il codice jQuery in questa funzione.

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
 
    }
  };
})(jQuery);

Arriviamo così al concetto di behavior. Quando si scrive codice jQuery in Drupal, bisogna sempre racchiuderlo prima in function ($) e poi in un behavior. Il nome del behavior deve essere univoco, come nel nostro esempio myModuleBehavior, ma puoi crearne diversi, ognuno con il proprio nome:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
 
    }
  };
 
  Drupal.behaviors.productPageBehavior = {
    attach: function (context, settings) {
 
    }
  };
})(jQuery);

I nomi dei behavior devono essere scritti in camelCase. I behavior vengono eseguiti al caricamento della pagina e dopo ogni richiesta AJAX. Quindi, ogni volta che del nuovo contenuto viene aggiunto al sito tramite AJAX, il codice nel behavior viene richiamato automaticamente. Questo è molto diverso da:

$(document).ready(function () {
  // Non usare questo tipo di codice in Drupal.
});

che invece viene eseguito una sola volta al caricamento iniziale della pagina.

Se inizi a usare i behavior e noti che alcuni eventi vengono ripetuti più volte (ad esempio, lo stesso blocco viene aggiunto più volte), il problema è probabilmente la mancanza della funzione .once():

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      // Il behavior viene chiamato più volte sulla pagina, non dimenticare di usare .once().
      $('.inner').append('<p>Test</p>');
    }
  };
})(jQuery);

In questo caso, per ogni richiesta AJAX verrà aggiunto un nuovo paragrafo “Test”. Per risolvere il problema, aggiungiamo .once():

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      // Il behavior viene chiamato più volte sulla pagina, usa .once() per evitare duplicazioni.
      $('.inner').once('add-paragraph').append('<p>Test</p>');
    }
  };
})(jQuery);

Un’altra caratteristica dei behavior è la variabile context. Ogni volta che del nuovo contenuto viene aggiunto al sito (tramite caricamento iniziale o AJAX), il contenuto aggiunto viene passato nella variabile context. In questo modo non è necessario scansionare l’intero DOM dopo ogni richiesta AJAX per agganciare eventi ai selettori; basta usare context:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      // Il behavior viene chiamato più volte sulla pagina, non dimenticare di usare .once().
      $(context).find('.inner').once('add-paragraph').append('<p>Test</p>');
    }
  };
})(jQuery);

Ora il codice è scritto secondo lo stile corretto di Drupal. Naturalmente puoi ancora usare $(document).ready(), ma funzionerà solo una volta e sarà più lento rispetto all’uso dei behavior.

Se hai domande su jQuery/JavaScript o suggerimenti per ulteriori argomenti, scrivili nei commenti.