Usprawnienie dynamicznego dodawania komponentów

Witam,

tworzę stronkę, na której dynamicznie tworzone są okienka do edycji tekstu (textarea), obok każdego okienka znajduje się zestaw przycisków (Przesuń w górę/dół, usuń itp.). W tej chwili robię to "na piechotę". Czyli każdorazowo przy tworzeniu nowego okienka po kolei jest rysowany element <textarea/>, następnie po kolei przyciski itd. Zastanawiam się, czy da się to jakoś usprawnić. Czyli czy w javascripcie możliwe jest utworzenie jakiegoś panelu/komponentu zawierającego kilka kontrolek tak, żeby później po prostu wstawić cały panel jedną komendą, przekazać do niego tekst jako zmienną itp.

Macie jakieś namiary na tutoriale pokazujące jak to zrobić? Dodam, że strona stoi na lokalnym serwerze i jest częściowo robiona w PHP.

Wszystkiego jeżeli chcesz i wstawić do każdego inny tekst, dodać zdarzenia itd. dosłownie jedną komendą zrobić sie nie da ale można to uprościć używajać <template>
https://www.w3schools.com/tags/tag_template.asp

kAzek napisał(a):

Wszystkiego jeżeli chcesz i wstawić do każdego inny tekst, dodać zdarzenia itd. dosłownie jedną komendą zrobić sie nie da ale można to uprościć używajać <template>
https://www.w3schools.com/tags/tag_template.asp

Dzięki. Pooglądam. Zwróciłem tez uwagę na Reacta (w zasadzie jestem prawie poczatkujący w Javascripcie i dotychczas Reacta nie używałem :)

Ajgor napisał(a):

kAzek napisał(a):

Wszystkiego jeżeli chcesz i wstawić do każdego inny tekst, dodać zdarzenia itd. dosłownie jedną komendą zrobić sie nie da ale można to uprościć używajać <template>
https://www.w3schools.com/tags/tag_template.asp

Dzięki. Pooglądam. Zwróciłem tez uwagę na Reacta (w zasadzie jestem prawie poczatkujący w Javascripcie i dotychczas Reacta nie używałem :)

Nie idź w reacta jak nie umiesz JavaScript. Pomysł z <template> jest spoko.

Riddle napisał(a):

Ajgor napisał(a):

kAzek napisał(a):

Wszystkiego jeżeli chcesz i wstawić do każdego inny tekst, dodać zdarzenia itd. dosłownie jedną komendą zrobić sie nie da ale można to uprościć używajać <template>
https://www.w3schools.com/tags/tag_template.asp

Dzięki. Pooglądam. Zwróciłem tez uwagę na Reacta (w zasadzie jestem prawie poczatkujący w Javascripcie i dotychczas Reacta nie używałem :)

Nie idź w reacta jak nie umiesz JavaScript. Pomysł z <template> jest spoko.

Pobawię się templatami. Co do znajomości JS, to nie tak ,że w ogóle go nie znam :) Całkiem spokojnie poruszam sie w C#, a JS ma sporo mechanizmów podobnych (chociaż sama obiektowość chyba wygląda nieco inaczej). Pisząc coś w JS nie tyle muszę się uczyć, co w niektórych przypadkach sprawdzić składnię, lub poszukać jakiejś funkcji, której nie znam Ale dzieki za sugestię.

Oczywiście można "klonować" gotowe "templatki" ale jest to mało eleganckie i są do tego gotowe narzędzia dostępne w każdej współczesnej przeglądarce i nie wymaga to żadnych dodatkowych bibliotek typu React, VUE itp...
Nazywa się to WebComponents : https://developer.mozilla.org/en-US/docs/Web/Web_Components. Bardzo prosta idea o ogromnych możliwościach póki co jeszcze mało doceniana ale jej znaczenie systematycznie wzrasta.

Jak masz utworzony taki własny komponent to potem w kodzie HTML możesz użyć np.:

<moj-komponent-daty color==red first-year=1990></moj-komponent-daty>

Tu prosty przykład: https://codepen.io/bradtraversy/pen/wvaXKoK

katakrowa napisał(a):

Oczywiście można "klonować" gotowe "templatki" ale jest to mało eleganckie i są do tego gotowe narzędzia dostępne w każdej współczesnej przeglądarce i nie wymaga to żadnych dodatkowych bibliotek typu React, VUE itp...
Nazywa się to WebComponents : https://developer.mozilla.org/en-US/docs/Web/Web_Components. Bardzo prosta idea o ogromnych możliwościach póki co jeszcze mało doceniana ale jej znaczenie systematycznie wzrasta.

Jak masz utworzony taki własny komponent to potem w kodzie HTML możesz użyć np.:

<moj-komponent-daty color==red first-year=1990></moj-komponent-daty>

Tu prosty przykład: https://codepen.io/bradtraversy/pen/wvaXKoK

Tylko że web components też używają <template> więc to nie jest takie czarno białe.