Templatki JS bez użycia jQuery

Framework jQuery zakorzenił się tak bardzo w środowisku deweloperów www, że wielu z nich "automatycznie" dodaje go do swoich projektów. Od pewnego czasu w swoich projektach, tam gdzie nie jest to konieczne, nie używam jQuery. Dzisiaj przedstawię wam jak używać templatek bez użycia frameworka jQuery.

Templatki JS bez użycia jQuery

Co to są templatki kodu HTML?

Większość osób tworzących strony www spotkała się z pojęciem templatki/szablony stron. Co w przypadku fragmentów strony, który chcemy powielić bez duplikowania kodu? Tu z pomocą przychodzą templatki kodu.

Przykład

var data = [
  {
    image:
      "https://images.pexels.com/photos/2083500/pexels-photo-2083500.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
    title: "Tytuł karty #1",
    text:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae pulvinar lectus, at lobortis risus."
  },
  {
    image:
      "https://images.pexels.com/photos/1571938/pexels-photo-1571938.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
    title: "Tytuł karty #2",
    text:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer condimentum nulla vitae augue interdum."
  },
  {
    image:
      "https://images.pexels.com/photos/1571939/pexels-photo-1571939.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
    title: "Tytuł karty #3",
    text:
      "Nulla tincidunt fringilla nulla in aliquam. Nullam urna erat, mollis ac tempus id, aliquam sit amet dui."
  }
];

Powyższy fragment to zestaw danych na jakich będziemy pracować zawierający obrazek, tytuł i krótki tekst.

for(var i=0; i < data.length; i++) {
  var item = data[i];
 
  var template = document.querySelector("#card");
  template.content.querySelector(".card .image img").src = item.image;
  template.content.querySelector(".card .title h4").innerHTML = item.title;
  template.content.querySelector(".card .text p").innerHTML = item.text;
 
  var clone = document.importNode(template.content, true);
  document.querySelector("#cards").append(clone);
}

Następnie tworzymy pętlę, w której obrobimy nasze dane. Przypisujemy konkretny item do zmiennej, następnie pobieramy naszą templatkę z kodu za pomocą funkcji querySelector(). Kolejne 3 linie przypisują nam obrazek, tytuł i tekst do konkretnych elementów templatki.

Na koniec tworzymy z templatki obiekt, a następnie wrzucamy go do odpowiedniego kontenera.

Zostało jedynie ostylować kod CSS'em i gotowe!

Podsumowanie

Powyższy sposób na templatki kodu HTML to oczywiście jeden z wielu. Moim zdaniem ten jest najprostszy. Istnieją też gotowe frameworki do tworzenia templatek, ale to temat na inną chwilę.

Powiadomienie cookies

Strona lukaszbacik.pl zapisuje pliki cookies na komputerach odwiedzających ją internautów. Czytaj więcej.