6.8. Drupal での javascript/jQuery の操作。behavior とは？

10/09/2019, by mikhail

まず、カスタム javascript ファイルを私たちのテーマに組み込む方法に戻りましょう。.libraries.yml ファイルで、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

2 スペースになるようにインデントを守ることが重要です。これで、js/custom.js ファイルを組み込みました。しかし、これだけでは jQuery が私たちのために機能しません。実は、Drupal のコアは jQuery を必要とせず、jQuery を含みません。それは別途組み込む必要があります:

dependencies:
  - core/jquery

また、jQuery.once() を使います。これは jQuery 用の別のプラグインで、セレクターにイベントとメソッドを一度だけアタッチするためのものです。

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

実は、私たちは異なるイベントに対して Drupal によって数回呼び出される javascript コードを書きます。したがって、この .once() メソッドが必要になります。

それでは、custom.js ファイルにいくつかコードを追加しましょう:

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

(function ($) {

})(jQuery);

jQuery のコードをこの構文で包むのは、Drupal の jQuery が .noConflict() モードで動作するからです。これは、ドル記号 $ を使うために必要で、これが他の javascript フレームワーク Prototype、MooTools と競合しないようにするためです。これらのフレームワークに出会うことはまずないでしょう。jQuery がしっかりと主導的な地位を占めました。しかし、すべての jQuery コードをこの構文で包む必要があります。

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

    }
  };
})(jQuery);

こうして behavior にたどり着きます。Drupal で jQuery コードを書く場合、まず function ($) で包み、次に behavior で包む必要があります。behavior の名前は一意でなければなりません。私たちの例では myModuleBehavior ですが、各 behavior に名前を書く必要があります:

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

    }
  };

  Drupal.behaviors.productPageBehavior = {
    attach: function (context, settings) {

    }
  };
})(jQuery);

behavior の名前には camelCase を使います。behavior はページの読み込み時、すべての AJAX リクエストで呼び出されます。したがって、新しいコンテンツがサイトにアップロードされて既存のサイトの構造に埋め込まれると、behavior のコードが毎回呼び出されます。これは次のものと大きく異なります:

$(document).ready(function () {
  // Do some fancy stuff.
  // Do not use such code in Drupal.
});

これはページの読み込み時に一度だけ呼び出されます。

behavior を使い始めて、サイトで奇妙なイベント、例えば jQuery を通じてブロックが数回追加されるのに気づいた場合:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      // Behavior вызывается несколько раз на странице, не забывайте использовать функцию .once().
      $('.inner').append('<p>Test</p>');
    }
  };
})(jQuery);

各 ajax リクエストで、もう 1 つ Test 段落を追加してしまいます。したがって、.once() 関数を追加する必要があります:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      // Behavior is called several times on the page, do not forget to use the .once () function.
      $('.inner').once('add-paragraph').append('<p>Test</p>');
    }
  };
})(jQuery);

behavior のもう 1 つの特徴は context 変数です。ページの読み込み時または ajax を通じてサイトに新しいコンテンツが追加されるたびに、すべての新しいコンテンツが context 変数にあります。したがって、各 ajax リクエストの後に、セレクターにイベントをアタッチするために DOM ツリー全体をたどる必要はありません。context だけで十分です:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      // Behavior is called several times on the page, do not forget to use the .once () function..
      $(context).find('.inner').once('add-paragraph').append('<p>Test</p>');
    }
  };
})(jQuery);

これで段落は正しい Drupal スタイルで書かれています。もちろん、document.ready() を使った古い書き方も使えますが、その場合は一度だけ機能し、behavior を通じたものより遅くなります。

jQuery/javascript について質問や、追加のテーマの提案があれば、コメントに書いてください。

パレット - カラフルに🎨

6.8. Drupal での javascript/jQuery の操作。behavior とは？

Menu

Let’s talk