6.8. Աշխատեք javascript/jQuery-ի հետ Drupal-ում: Որոնք են վարքագծերը:

Սկսելու համար, եկեք վերադառնանք այն բանին, թե ինչպես ներառել հատուկ 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

Կարևոր է հետևել ներդիրին, որպեսզի այն լինի երկու բացատում: Այսպիսով, մենք ներառել ենք js/custom.js ֆայլը: Բայց սա բավարար չէ, որպեսզի jQuery-ն աշխատի մեզ մոտ: Փաստն այն է, որ Drupal միջուկը չի պահանջում jQuery, իսկ jQuery-ն չի ներառում: Այն պետք է ներառվի առանձին.

dependencies:
  - core/jquery

Մենք նաև կօգտագործենք jQuery.once(), սա jQuery-ի առանձին պլագին է՝ իրադարձություններն ու մեթոդները ընտրողին միայն մեկ անգամ կցելու համար։

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

Փաստն այն է, որ մենք գրելու ենք javascript կոդ, որը մի քանի անգամ կկանչվի Drupal-ի կողմից տարբեր իրադարձությունների համար։ Հետևաբար, մեզ անհրաժեշտ կլինի այս .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 կոդը փաթաթում ենք այս կառուցվածքում, քանի որ jQuery-ն Drupal-ում աշխատում է .noConflict () ռեժիմով: Սա անհրաժեշտ է դոլարի նշանն օգտագործելու համար, և դա չի հակասում javascript-ի այլ շրջանակների՝ Prototype, MooTools: Դժվար թե դուք ստիպված լինեք հանդիպել այս շրջանակների հետ. jQuery-ն ամուր առաջատար դիրք է գրավել: Բայց դուք ստիպված կլինեք փաթեթավորել ամբողջ jQuery ծածկագիրը այս կառուցվածքում:

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

Այսպիսով, մենք գալիս ենք վարքագծին: Եթե դուք գրում եք jQuery կոդը Drupal-ում, ապա պետք է այն նախ փաթեթավորեք ֆունկցիայի մեջ ($), իսկ երկրորդը՝ վարքագծի մեջ։ Վարքագծի անունը պետք է լինի եզակի, մեր օրինակում myModuleBehavior, բայց դուք պետք է անուն գրեք յուրաքանչյուր վարքագծի համար.

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

Օգտագործեք camelCase պահվածքը անվանելու համար: Վարքագիծը կոչվում է, երբ էջը բեռնվում է AJAX-ի յուրաքանչյուր հարցման համար: Այսպիսով, երբ նոր բովանդակությունը վերբեռնվում է կայք և ներդրվում գոյություն ունեցող կայքի կառուցվածքում, ամեն անգամ կանչվում է վարքագծի կոդը: Սա զգալիորեն տարբերվում է հետևյալից.

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

որը կանչվում է միայն մեկ անգամ էջը բեռնելիս:

Եթե սկսել եք վարքագծեր օգտագործել և նկատել եք, որ տարօրինակ իրադարձություններ ունեք կայքի հետ, օրինակ՝ jQuery-ի միջոցով, մի քանի անգամ բլոկ է ավելացվում.

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

Ajax-ի յուրաքանչյուր հարցման համար դուք կավելացնեք ևս մեկ թեստային պարբերություն: Հետևաբար, դուք պետք է ավելացնեք .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);

Վարքագծի մեկ այլ առանձնահատկություն է համատեքստի փոփոխականը: Ամեն անգամ, երբ նոր բովանդակություն է ավելացվում կայքում, երբ էջը բեռնվում է կամ ajax-ի միջոցով, ապա ամբողջ նոր բովանդակությունը գտնվում է համատեքստի փոփոխականում: Այսպիսով, մենք կարիք չունենք անցնելու ամբողջ DOM ծառի միջով, յուրաքանչյուր ajax հարցումից հետո իրադարձությունը կցելու ընտրիչին: Բավական է միայն համատեքստը.

(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 (), բայց հետո այն կաշխատի միայն մեկ անգամ և ավելի դանդաղ, քան վարքագծի միջոցով:

Եթե ունեք հարցեր jQuery/javascript-ի կամ լրացուցիչ թեմայի վերաբերյալ առաջարկներ, գրեք մեկնաբանություններում։