6.8. Arbeiten mit JavaScript/jQuery in Drupal. Was sind Behaviors?

Um anzufangen, kehren wir zurück dazu, wie man benutzerdefinierte JavaScript-Dateien in unser Theme einbindet. In der .libraries.yml-Datei müssen Sie js einbinden:

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 ist wichtig, die Einrückung mit zwei Leerzeichen einzuhalten. So haben wir die Datei js/custom.js eingebunden. Aber das reicht nicht aus, damit jQuery für uns funktioniert. Tatsächlich wird jQuery im Drupal-Core nicht automatisch geladen und auch nicht eingebunden. Es muss separat eingebunden werden:

dependencies:
  - core/jquery

Wir verwenden auch jQuery.once(), ein separates Plugin für jQuery, um Ereignisse und Methoden nur einmal an einen Selektor anzuhängen.

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

Das liegt daran, dass unser JavaScript-Code von Drupal mehrmals für verschiedene Ereignisse aufgerufen wird. Deshalb brauchen wir die .once()-Methode.

Jetzt fügen wir etwas Code in die custom.js-Datei ein:

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

Schauen wir uns das der Reihe nach an.

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

Wir kapseln jQuery-Code in diesem Konstrukt, weil jQuery in Drupal im .noConflict() Modus läuft. Dadurch können wir das Dollarzeichen $ verwenden, ohne dass es zu Konflikten mit anderen JavaScript-Frameworks wie Prototype oder MooTools kommt. Obwohl es unwahrscheinlich ist, dass Sie auf diese Frameworks treffen, müssen Sie dennoch sämtlichen jQuery-Code so kapseln.

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

Kommen wir zum Behavior: Wenn Sie jQuery-Code in Drupal schreiben, müssen Sie ihn erstens in function ($) und zweitens in ein Behavior einbetten. Der Name des Behaviors muss eindeutig sein, in unserem Beispiel heißt es myModuleBehavior, aber für jedes Behavior sollten Sie einen eigenen Namen vergeben:

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

Verwenden Sie CamelCase für die Benennung der Behaviors. Ein Behavior wird beim Laden der Seite und bei jedem AJAX-Aufruf ausgeführt. Das bedeutet, wenn neuer Inhalt auf die Seite geladen und in die bestehende Struktur eingebettet wird, wird der Behavior-Code jedes Mal aufgerufen. Das unterscheidet sich deutlich von:

$(document).ready(function () {
  // Machen Sie etwas.
  // Verwenden Sie solchen Code in Drupal nicht.
});

Dieser wird nur einmal beim Laden der Seite aufgerufen.

Wenn Sie Behaviors verwenden und bemerken, dass seltsame Ereignisse auftreten, zum Beispiel wird durch jQuery ein Block mehrfach hinzugefügt:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      // Behavior wird mehrfach auf der Seite aufgerufen, vergessen Sie nicht die .once()-Funktion zu verwenden.
      $('.inner').append('<p>Test</p>');
    }
  };
})(jQuery);

Bei jedem AJAX-Aufruf wird ein weiterer Absatz "Test" hinzugefügt. Daher müssen Sie die .once()-Funktion verwenden:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      // Behavior wird mehrfach aufgerufen, daher .once() verwenden.
      $('.inner').once('add-paragraph').append('<p>Test</p>');
    }
  };
})(jQuery);

Ein weiteres Merkmal des Behaviors ist die Variable context. Bei jedem neuen Inhalt, der auf der Seite geladen wird, sei es beim Seitenaufruf oder per AJAX, befindet sich der neue Inhalt in der Variable context. So müssen wir nicht jedes Mal den gesamten DOM-Baum durchsuchen, um Ereignisse an Selektoren anzuhängen, sondern verwenden nur context:

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

Jetzt ist der Absatz auf korrekte Drupal-Art geschrieben. Natürlich können Sie weiterhin document.ready() verwenden, aber dann funktioniert der Code nur einmal und ist langsamer als mit Behaviors.

Wenn Sie Fragen zu jQuery/JavaScript haben oder Vorschläge für weitere Themen, schreiben Sie gerne in die Kommentare.