Korišćenje atributa u šablonima

Mnogi Twig šabloni će imati jedan ili više objekata Attribute prosleđenih kao promenljive. Zadatak objekta Attribute je da čuva skup HTML atributa, pružajući programeru korisne metode za interakciju sa tim podacima i omogućavajući lako ispisivanje atributa. Na primer, attribute.addClass('myclass') olakšava dodavanje jedne klase bez brige o tačnoj konkatenaciji stringova.

Obično atributi u šablonu treba da izgledaju otprilike ovako:

<div{{ attributes }}></div>

Između imena taga i Twig sintakse ne treba biti razmaka. Tema "stable", uključena u Drupal 8 core, sadrži mnogo primera atributa za proučavanje.

Po defaultu, sledeće promenljive objekata atributa su dostupne u svim šablonima: attribute, title_attributes i content_attributes.

Možete koristiti alat za debug (kint(), dump(), dpm() itd.) da proverite šta je dostupno. Primer korišćenja {{ kint(attribute) }} u fajlu node.html.twig je prikazan ispod.

Metode atributa

Evo nekoliko korisnih metoda koje možete koristiti sa objektom Attribute:

attributes.addClass()

Dodaje jednu ili više klasa u niz postojećih CSS klasa.

Jedna klasa:

<div{{ attributes.addClass('my-class') }}></div>

Više klasa:

{%
  set classes = [
    'red',
    'green',
  ]
%}
<div{{ attributes.addClass(classes) }}></div>

Izlaz će biti <div class="red green"></div>.

attributes.removeClass()

Uklanja klasu iz objekta Attribute. Koristi se slično kao addClass. Na primer, ako dobijate niz klasa iz neke druge funkcije prethodne obrade.

{% set classes = [ 'red', 'green', 'blue' ] %}

<div{{ attributes.addClass(classes).removeClass('green') }}></div>

Izlaz će biti <div class="red blue"></div>.

attributes.setAttribute($attribute, $value)

Postavlja vrednost atributa sa zadatim ključem.

<div{{ attributes.setAttribute('id', 'myID') }}></div>

Izlaz će biti <div id="myID"></div>.

attributes.removeAttribute($attribute)

Uklanja atribut sa objekta Attribute.

<div{{ attributes.removeAttribute('id') }}></div>

attributes.hasClass($class)

Proverava da li niz klasa sadrži zadatu CSS klasu.

{% if attributes.hasClass('myClass') %}
  {# uradite nešto #}
{% endif %}

Kreiranje atributa u Twig-u

Počevši od Drupal 8.3.x, postoji nova Twig funkcija create_attribute(). Pogledajte zapis promena: https://www.drupal.org/node/2818293.

Ona obezbeđuje novi prazan Attribute objekat koji se može koristiti za kreiranje atributa.

{% set my_attribute = create_attribute() %}
{%
  set my_classes = [
    'kittens',
    'llamas',
    'puppies',
  ]
%}
<div{{ my_attribute.addClass(my_classes).setAttribute('id', 'myUniqueId') }}>
  {{ content }}
</div>

<div{{ create_attribute({'class': ['region', 'region--header']}) }}>
  {{ content }}
</div>

Drugi korisni primeri

Dot notation može biti ugnježdena

{% set classes = ['red', 'green', 'blue'] %}
{% set my_id = 'specific-id' %}
{% set image_src = 'https://www.drupal.org/files/powered-blue-135x42.png' %}

<img{{ attributes.addClass(classes).removeClass('green').setAttribute('id', my_id).setAttribute('src', image_src) }}>

Izlaz će biti <img id="specific-id" class="red blue" src="https://www.drupal.org/files/powered-blue-135x42.png">

Korišćenje twig filtera without

Twig filter without izvlači deo atributa:

<div class="myclass {{ attributes.class }}"{{ attributes|without('class') }}></div>

Napomena: U većini slučajeva treba izbegavati upotrebu ovakvog koda i umesto toga koristiti addClass().

Budite veoma oprezni pri ručnom dodeljivanju atributa u Twig šablonima. Obavezno uvek stavljajte vrednosti atributa u dvostruke navodnike, jer u suprotnom sajt može biti ranjiv na XSS napade. Twig automatski escape-uje sadržaj u dvostrukim navodnicima i štiti od XSS-a.

Ovaj Twig šablon:

<b class={{ attributes.class }}>Hello</b>

Sa korisničkim unosom:

foo onclick=alert(bar)

Rezultat će biti:

<b class=foo onclick=alert(bar)>Hello</b>

Ovo je Twig šablon sa dvostrukim navodnicima:

<b class="{{ attributes.class }}">Hello</b>

Dvostruki navodnici će proizvesti sledeći rezultat iz istog unosa:

<b class="foo &quot; onclick=&quot;alert(bar)">Hello</b>

Izmena atributa with without filterom

{% set attributes = attributes.addClass('my-class') %}
<div{{ attributes }}></div>