6.8. Rad sa javascript/jQuery u Drupalu. Šta su behaviors (ponašanja)?

Da bismo počeli, vratimo se kako da uključimo prilagođene javascript fajlove u našu temu. U .libraries.yml fajlu, potrebno je uključiti 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

Važno je pratiti uvlačenje od dva razmaka. Dakle, uključili smo fajl js/custom.js. Ali to nije dovoljno da bi jQuery radio za nas. Drupal core ne zahteva jQuery i ne uključuje ga automatski. On mora biti uključen zasebno:

dependencies:
  - core/jquery

Koristićemo i jQuery.once(), što je poseban plugin za jQuery, koji omogućava da se događaji i metode vezuju za selektor samo jednom.

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

Razlog je što ćemo pisati javascript kod koji Drupal poziva više puta za različite događaje. Zato nam treba metoda .once().

Sada dodajmo neki kod u fajl custom.js:

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

Objasnimo redom.

(function ($) {

})(jQuery);

Obmotavamo jQuery kod u ovu konstrukciju zato što jQuery u Drupalu radi u režimu .noConflict(). To je potrebno da bismo mogli da koristimo znak dolara $ bez konflikta sa drugim javascript framework-ovima kao što su Prototype, MooTools. Verovatno nećete sresti te framework-e, ali morate sav jQuery kod ovako da obmotate.

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

    }
  };
})(jQuery);

Evo šta je behavior. Kada pišete jQuery kod u Drupalu, prvo ga obmotajte u funkciju ($), a zatim u behavior. Naziv behavior-a mora biti jedinstven, u našem primeru je myModuleBehavior, ali za svaki behavior pišete poseban naziv:

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

    }
  };

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

    }
  };
})(jQuery);

Korišćenje je u camelCase stilu. Behavior se poziva prilikom učitavanja stranice i za svaki AJAX zahtev. Kada se novi sadržaj doda na sajt i ugradi u postojeću strukturu, behavior kod se ponovo poziva. Ovo je bitno razlikovanje od:

$(document).ready(function () {
  // Uradi nešto.
  // Ne koristi ovakav kod u Drupalu.
});

koji se poziva samo jednom prilikom učitavanja stranice.

Ako ste počeli da koristite behaviors i primetili čudne događaje, na primer da se neki blok dodaje više puta:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      // Behavior se poziva više puta na stranici, ne zaboravite da koristite .once().
      $('.inner').append('<p>Test</p>');
    }
  };
})(jQuery);

Za svaki AJAX zahtev dodat će se novi paragraf Test. Zato je neophodno koristiti .once():

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      // Behavior se poziva više puta na stranici, ne zaboravite da koristite .once().
      $('.inner').once('add-paragraph').append('<p>Test</p>');
    }
  };
})(jQuery);

Još jedna osobina behavior-a je promenljiva context. Svaki put kada se novi sadržaj doda na sajt prilikom učitavanja stranice ili AJAX-om, sav taj novi sadržaj je u promenljivoj context. Zato nije potrebno prolaziti ceo DOM nakon svakog AJAX zahteva da biste vezali događaj za selektor. Dovoljno je koristiti context:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      // Behavior se poziva više puta na stranici, ne zaboravite da koristite .once().
      $(context).find('.inner').once('add-paragraph').append('<p>Test</p>');
    }
  };
})(jQuery);

Sada je paragraf napisan u ispravnom Drupal stilu. Naravno, možete i dalje koristiti stari pristup sa document.ready(), ali on će se pozvati samo jednom i sporiji je od behavior-a.

Ako imate pitanja o jQuery/javascript-u ili predloge za dodatnu temu, pišite u komentarima.